[React] Input 여러개 최적화하기.useRef

회원가입 페이지처럼 input 창이 여러개인 페이지에서 사용할수있는 방법이다.

 

기존에 많이 사용하는방법인 객체로 만들어서 input태그에 name값이나 해당 input이 무엇인지 판별한 값을 준다음

useState로 값을 변경하는 방식을 많이 사용하는듯 하다.

이러한 방식은 코드 관리차원에서는 깔끔하고 좋아보이나 각 input값들이 변경될때마다 재 렌더링 된다는 단점이있다.

해당 방식에서 영감을 얻어서 이를 useRef로 바꿔보도록하자.

function Regist() {
    const [inputs,serInputs] = useState({
        userId: "",
        password: "",
        email: "",
        phone: ""
    });;
    const {userId, password, email, phone} = inputs
    
  const onChange = (e: React.ChangeEvent<HTMLInputElement>, type: string) => {
    const value = e.target.value;
    setInputs({
      ...inputs,
      [type]: value,
    });
  };
}

 

useRef 쓰는 이유

useState는 state가 변경되면 내부의 모든 변수들이 초기화 되는 반면에 useRef 컴포넌트가 재 렌더링 되지않는다.

userId를 입력할때나 password를 입력할때나 값을 저장만 할뿐 컴포넌트를 재 렌더링 시키지않는다.

이러한 점을 활용해서 불필요한 재 렌더링을 막을수있다.

 

useRef 사용법

useRef를 사용하고자하는 컴포넌트에서 import시켜주고 변수명에 useRef로 초기값을 설정해주면된다.

import {useRef} from "react";

const userId = useRef("");
console.log(userId.current);

useState와는 다르게 userId의 값을 가져오려면 userId.current로 접근해야한다.

useRef는 초기값을 객체로( {current:vlue} ) 저장하기때문에  변수명.current로 접근하면된다.

 

위의 회원가입 페이지를 useRef로 최적화를 시켜보자.

 

useRef로 회원가입 페이지 최적화

function Regist() {
    const userId = useRef("");
    const password = useRef("");
    const email = useRef("");
    const phone = useRef("");
    
  const onChange = (e: React.ChangeEvent<HTMLInputElement>, type: React.MutableRefObject<string>) => {
    const value = e.target.value;
    type.current = value;
  };
  
  const RegistHandler = ()=>{
    console.log(userId.current,
                password.current,
                email.current,
                phone.current);
  }
  
  useEffect(()=>console.log('렌더링된다'))
  
  return(
      <input onChange{
          (e: React.ChangeEvent<HTMLInputElement>)=>onChange(e,userId);
      }/>
      <input onChange{
          (e: React.ChangeEvent<HTMLInputElement>)=>onChange(e,password);
      }/>
      <input onChange{
          (e: React.ChangeEvent<HTMLInputElement>)=>onChange(e,email);
      }/>
      <input onChange{
          (e: React.ChangeEvent<HTMLInputElement>)=>onChange(e,phone);
      }/>
      <button onClick={()=>RegistHandler()}>회원가입</button>
  )
}

변수들을 useRef로 할당해주었고 onChane함수는 파라미터로 input값과 useRef변수를 받는다.

input값이 변경하면 해당하는 useRef의 current에 값을 저장한다. (저장하기만 할뿐 렌더링 하지않는다.)

아무리 값을 변경해도 "렌더링된다" console.log는 맨처음 렌더링 할때 말고는 출력되지않을것이다.

이런식으로 useRef로 최적화 할수있다.

편-인