useState vs useRef vs 일반 JS 초기화

*GPT와의 채팅을 통해 정리한 글입니다.

 

리액트 컴포넌트 함수 내부에서 값을 저장하는 경우는 항상 발생합니다.
일반적으로 다음 세가지 방법을 통해 값을 저장합니다.

1. useState
2. useRef
3. 일반 JS 초기화

이들의 특징과 차이에 대해 기록해두었습니다.

 

 

useState

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

• React 컴포넌트의 상태 관리를 위해 사용됩니다.
• 상태를 변경하면 리렌더링이 발생합니다.
  → 그러므로 UI에 상태를 반영할 수 있는 것입니다.
• 리렌더링이 발생해도 값이 유지됩니다.

useRef

const count3 = useRef(0);

• DOM 요소를 참조하거나 지속성이 유지되는 값을 저장할때 사용됩니다.
• 값 변경 시 리렌더링을 유발하지 않습니다.
• 리렌더링이 발생해도 값이 유지됩니다.
• react hook form 같이 UI에 관여하지 않고 값을 갱신하는 비제어 컴포넌트 값을 저장할 때도 활용됩니다.

일반 JS 초기화

const count2 = 0;

• 일반적인 변수 또는 함수 선언 방법입니다.
• 값 변경 시 리렌더링을 유발하지 않습니다.
• 컴포넌트를 리렌더링 할때마다 재초기화됩니다.
  → 복잡한 로직이 포함될 경우 성능상 문제가 커질 수 있습니다.
  • useMemo(변수 초기화) 또는 useCallback(함수 초기화)을 사용합시다.
    → 이 둘은 의존성배열의 상태가 변할때 마다 재초기화 하며, 재초기화 전에는 이전에 초기화했던 변수(또는 함수)을 메모이제이션(캐싱)합니다.