Blog

서론#

React를 사용하다 보면
몇몇 훅은 거의 모든 컴포넌트에서 반복해서 사용하게 된다.

이 글에서는
그중에서도 가장 기본이 되는 다음 세 가지 훅을 정리한다.
• useState
• useEffect
• useRef

각 훅이 무엇을 위한 도구인지,
그리고 어떤 상황에서 유용한지를 중심으로 정리한다.

(1) useState#

useState는
컴포넌트가 기억해야 할 값을 만들기 위한 훅이다.

값이 변경되면
React는 해당 컴포넌트를 다시 렌더링한다.

그래서 useState는 주로
다음과 같은 경우에 유용하다.

• 입력값, 선택값처럼 UI에 직접 반영되는 값
• 토글, 모달 열림 여부 같은 UI 제어 상태
• 화면에 표시되는 데이터 상태

const [value, setValue] = useState("");

중요한 점은
useState로 관리되는 값은
렌더링 결과에 영향을 준다는 것이다.

값이 바뀌었는데
화면을 다시 그릴 필요가 없다면,
그 값은 state가 아닐 가능성이 크다.

(2) useEffect#

useEffect는
렌더링 결과로 인해 발생하는 사이드 이펙트를 처리하기 위한 훅이다.

여기서 말하는 사이드 이펙트는
렌더링 그 자체가 아닌, 그 이후에 발생해야 하는 작업이다.

대표적인 예는 다음과 같다.

• 데이터 요청
• 이벤트 리스너 등록 / 해제
• 외부 API 호출
• 상태 변경에 따른 동기화 작업

useEffect(() => {
  fetchData();
}, []);

useEffect는
렌더링 이후 실행된다는 점이 핵심이다.

그래서 화면을 그리는 계산 로직과
외부에 영향을 주는 로직을
구분하는 데 유용하다.

(3) useRef#

useRef는
값을 저장하지만,
그 값이 변경돼도 렌더링을 발생시키지 않는다.

이 특성 때문에
useRef는 다음과 같은 경우에 유용하다.

• DOM 요소에 직접 접근해야 할 때
• 렌더링과 무관한 값을 유지해야 할 때
• 이전 값을 저장해야 할 때
• 타이머, 인터벌 ID 관리

const inputRef = useRef<HTMLInputElement>(null);

useRef는
state와 달리 값이 바뀌어도
컴포넌트는 다시 그려지지 않는다.

그래서
"값은 필요하지만, UI와는 무관하다"는 경우에
자연스러운 선택이 된다.