[React] useState와 useRef

 

1. useState

useState는 상태를 관리하는데 사용되며, 컴포넌트 내에서 상태를 선언하고 해당 상태가 변경될 때 리렌더링 된다.

const Component = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>더하기</button>
    </div>
  );
};

useState는 count라는 상태변수와 setCount라는 상태를 변경하기 위한 함수를 반환한다.

그래서 클릭이벤트가 발생할 때 setCount를 호출해서 count값을 증가 시키는 역할을 한다.

 

2. useRef

useRef는 DOM 요소에 접근할 수 있는 훅으로 주로 input 요소에 포커스를 맞출 때 사용되며 컴포넌트가 리렌더링되어도 유지된다.

const Component = () => {
  const inputRef = useRef(null); // 레퍼런스 객체 생성

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button>Submit</button>
    </div>
  );
};

레퍼런스 객체를 생성할 때 초기값을 null로 사용하는 이유는 해당 useRef가 현재 아무런 값을 참조하지 않는다는걸 명시적으로 나타낸다.

그리고 ref 속성을 사용해서 useRef로 생성된 객체를 input 요소와 연결하면 해당 요소에 접근할 수 있게 된다.

 

useEffect를 사용해서 컴포넌트가 처음 렌더링 될 때 inputRef.current.focus()를 호출해서 input에 자동으로 포커스를 받게 된다.

current 속성은 useRef로 생성된 객체가 현재 참조하고 있는 값을 나타내며 실제 DOM 요소에 접근할 수 있다.

 

이처럼 useState는 컴포넌트 내에서 상태관리, useRef는 DOM요소에 접근하기 위해 사용되며 렌더링에도 차이가 있다.

useState는 위에서 말했던 것처럼 상태가 변경되면 해당 컴포넌트가 다시 렌더링되지만,

useRef는 컴포넌트의 렌더링 주기에 거의 영향을 미치지 않기때문에 DOM요소에 접근하거나 이전값을 유지하는데 사용할 수 있다.

 

3. useState 대신 useRef 사용하기

그래서 이전 값을 유지하거나, 일관적으로 동일한 값을 제공해야하는 경우 useRef를 사용해서 값을 유지하고 해당 값이 변경되어도 불필요한 렌더링을 방지할 수 있다.

예를 들면 useRef를 사용해서 컴포넌트가 마운트 되었는지 여부를 추적하는데에도 사용할 수 있다.

const Component = () => {
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);

  return (
    <div>
      {isMounted.current && '마운트 완료'}
    </div>
  );
};

useRef로 isMounted 초기값을 false로 설정했고,

isMounted.current를 사용해서 useRef로 관리되는 값을 읽거나 변경할 수 있다.

 

useEffect로 컴포넌트가 처음 마운트 될 땐 isMounted 값을 true로, 컴포넌트가 언마운트 될 땐 값을 false로 다시 설정한다.

그래서 isMounted가 true일 때 마운트 완료 라는 문자열을 출력할 수 있게 된다.