[TIL] 24_0131 useState 와 useRef

useState와 useRef를 사용하는 input 내부의 값 관리

useState로 하면 많은 값을 같이 불변성을 지키면서 눈으로 즉각 보며 관리를 할 수 있어서 좋고

useRef는 그 부분의 값을 저장하고 해당 부분을 콕 짚어서 제어할 수 있어서 좋아서

같이 필요한 곳에 쓰믄 좋은 것 같아.

 

input값의 변화를 ref로 다룬다면 이렇게 가독성은 떨어지는 것 같아.

const test = () => {
    const inputOneRef=useRef(Number)
    const inputTwoRef=useRef(function(){})
    const inpuThreetRef=useRef(String)
    const inputfiveRef=useRef(boolean)
    const inputfiveRef=useRef()
    const inputSevenRef=useRef()
    
    return(
        <>
          <input ref={inputOneRef}>
          <input ref={inputTwoRef}>
          <input ref={inpuThreetRef}>
          <input ref={inputfiveRef}>
          <input ref={inputfiveRef}>
          <input ref={inputSevenRef}>
        </>
            )
    
}

 

 

 

 

둘의 차이는

useState는 변하는 state값을 리렌더링을 통해 화면에 즉각 보여주지만,

useRef같은 경우는 useEffect같은 콜백함수를 쓰지 않는 이상 값의 변화를 react가 트래킹할 수 없어서 즉각 화면에 보여지지 않아.

만약 보여진다면 useState를 썼을 때 리렌더링 됐을 때 변화를 한 꺼번에 모아서 반영이 되는그징.

const Contrast = () => {

const [count, setCount]=useState(0)


//ref 변화를 보고싶으면 이걸 써야함, 혹은 state값을 넣어 같이 변화시켜주거나 state값이 렌더링될 때 같이 변행
useEffect(() => {

inputRef.current = inputRef.current + 1
},[inputRef.current])    
    

return (
      <p>{count}</p>
     <button onClick=((e) => setValue(count + 1) ) />
     <button onClick=((e) =>   inputRef.current = inputRef.current + 1;
            console.log(inputRef.current);/>
    )

}
export default Contrast;

 

 

 

 

무엇이 더 효율적일까? 어떤 방법이 맞는 것일까? 왜 일까? 

 

효율적인 면에선 useState이 불변성을 지키거나 많은 값들을 관리할 때 좋은 것 같아. 화면에 렌더링 즉각되기도 해서 좋은 것 같고. 가독성에선 좀 떨어질 수 있지만 state 관리하는 커스텀 훅처럼 관리하면 가독성이 많이 좋아지는 것 같아.

 

이런 input값 관리하는 훅이 있으면 좋을 거구 이외에 react-hook-form같은 걸 이용하면 더 좋을 거구.

import { useCallback, useState } from "react";

const useInputs = (initialForm) => {
  const [form, setForm] = useState(initialForm);

  //onChange
  const onChange = useCallback((e) => {
    const { name, value } = e.target;
    setForm((preForm) => ({ ...preForm, [name]: value }));
  }, []);
  const reset = useCallback(() => setForm(initialForm), [initialForm]);

  return [form, setForm, onChange, reset];
};

export default useInputs;

// 출처 : 벨로퍼트님 리액트 블로그

 

   

 

ref같은 경우는 사용하기 간편할 수 있지만 많은 값들을 지정하고 저장할 때 가독성이 별로거나 유지보수가 어려운 것 같아. 화면에 나타낼 땐 다른 함수를 써줘야 즉각 나타나고. 렌더링해야 적용되는 게 아니라면 값을 저장하고 지정할 때 쓰면 효율적일 것 같아. 

 

그 외에, 아래처럼 공식 문서에서도 필요할 때 아니면 선언적으로 해결하고 ref를 지양하라고 권장하고 있어.

Ref를 사용해야 할 때

Ref의 바람직한 사용 사례! 

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양.

 

참고

https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs