React - useRef DOM 제어

리액트를 공부하다 보면 uesRef를 공부하게 될건데 useRef 는 JavaScript를 사용할때,

특정 DOM 을 컨트롤하기 위해 사용합니다,

주로 vanillaJS에서 document.querySelector, document.getElementById 와 같은것입니다.

 

간단한 예제를 보면서 확인을 해보도록 할게요.

 

import { useState, useRef } from "react";

function App() {
  const [userID, setUserID] = useState("");
  const [userPW, setUserPW] = useState("");

  const handleChangeID = (e) => {
    setUserID(e.target.value);
  };

  const handleChangePW = (e) => {
    setUserPW(e.target.value);
  };
  
  const handleSubmit = () => {
    console.log("userID: ", userID);
    console.log("userPW: ", userPW);
  };

  return (
    <div className="App">
      <input
        name="userID"
        value={userID}
        onChange={handleChangeID}
      />
      <input
        name="password"
        value={userPW}
        onChange={handleChangePW}
        type="password"
      />
      <button onClick={handleSubmit}>Login</button>
    </div>
  );
}

export default App;

간단한 id, pw를 받아서 로그인을 하는 프로그램을 만들어 보았습니다.

그런데 userID userPW 두가지 인데 상당히 코드양이 많은것을 확인 할수있습니다.

---

 

import { useState, useRef } from "react";

function App() {
  const [account, setAccount] = useState({
    userID: "",
    userPW: "",
  });

  const handleChangeAccount = (e) => {
    setAccount({
      ...account,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = () => {
    console.log("Account info: ", account);
  };

  return (
    <div className="App">
      <input
        name="userID"
        value={account.userID}
        onChange={handleChangeAccount}
      />
      <input
        name="userPW"
        value={account.userPW}
        onChange={handleChangeAccount}
        type="password"
      />
      <button onClick={handleSubmit}>submit</button>
    </div>
  );
}

export default App;

여러개의 input 상태를 관리하는 방법으로 수정해 보겠습니다.

그리고 handleChangeID, handleChangePW 함수 또한 합쳐보도록 하겠습니다.

 

다음과 같이 사용성이 아주 용이하게 바뀐 코드를 보실수 있습니다.

  const inputUserID = useRef();
  const inputUserPW = useRef();

이제 useRef를 사용하여보겠습니다.

 

jsx의 return 문 밖에서  다음과 같이 코드를 만들어 줍니다.

그리고 return 안에 input 부분에서 ref 속성을 추가해 줍니다.

<input
  ref={inputUserID}
  name="userID"
  value={account.userID}
  onChange={handleChangeAccount}
/>
<input
  ref={inputUserPW}
  name="userPW"
  value={account.userPW}
  onChange={handleChangeAccount}
  type="password"
/>

다음과 같이 ref={} 이러한 속성을 넣어주면 됩니다.

 

이제 useRef를 이용하여 DOM 을 컨트롤 해볼것입니다.

const handleSubmit = () => {
    if (account.userID < 5) {
      return; 
    }

    if (account.userPW < 8) {
      return;
    }

    console.log("Account info: ", account);
};

다음과 같이 userID 데이터 길이가 5개 미만 일때, userPW 데이터 길이가 8개 미만 일때

alter보다 focus를 줘서 유저에게 확인을 해주고 싶다면, useRef 를 사용하여 제어하면 됩니다.

 

  const handleSubmit = () => {
    if (account.userID.length < 5) {
      inputUserID.current.focus();

      return;
    }

    if (account.userPW.length < 8) {
      inputUserPW.current.focus();

      return;
    }

    console.log("Account info: ", account);
};

이제 userID 데이터 길이가 5미만 일때, userPW 길이가 8미만 일때 각각 focus가 작동되어 해당 조건이 실행 될때 해당 input창이 깜빡 깜빡 거리는것을 볼수있습니다.

 

 

이런식으로 React 에서도 Dom을 조작하여 재밌는것들을 만들어 보면 좋을것 같습니다.

 

고생하셧습니당