콘텐츠로 이동

React Hooks

개요

컴포넌트는 그려질 때마다 함수가 처음부터 다시 실행돼요. 그런데 사용자가 입력한 텍스트나 선택한 이미지 인덱스처럼 "화면이 다시 그려져도 기억해야 하는 값"이 있죠. 이런 값을 함수 지역 변수에 저장하면 렌더링 때마다 초기화되어 사라져요. 그래서 React는 컴포넌트가 렌더링 사이에 정보를 기억하고, React의 여러 기능을 끌어다 쓰는 특별한 함수를 제공해요. 그걸 Hooks라고 불러요.

핵심 개념

Hooks는 컴포넌트 안에서 React 기능을 쓰는 창구예요. 공식적으로 크게 몇 갈래로 나뉘고요.

  • State Hooks — useState는 직접 갱신할 수 있는 상태 변수를 선언하고, useReducer는 갱신 로직을 리듀서 안에 담아 두는 상태를 선언해요. 아래처럼 "값과 그 값을 바꾸는 함수" 한 쌍을 반환하죠.
function ImageGallery() {
  const [index, setIndex] = useState(0);
  // setIndex(1) 처럼 호출하면 index가 바뀌고 화면이 다시 그려진다.
}
  • Effect Hooks — useEffect는 컴포넌트를 "외부 시스템"과 연결해요. 네트워크, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리 같은 방식 코드를 다룰 때 쓰죠. 다만 외부 시스템과 상호작용할 때만 써야 해요. 화면 안에서 데이터 흐름을 조율하는 용도로 쓰면 안 됩니다.
  • Context Hooks — useContext는 props로 일일이 넘기지 않고 먼 부모의 값을 읽어요. 예를 들어 테마 같은 값을 최상위에서 내려주면 깊은 어디서든 읽을 수 있죠.
  • Ref Hooks — useRef는 렌더링에 쓰이지 않는 값(DOM 노드, 타이머 ID)을 보관해요. ref를 바꿔도 컴포넌트가 다시 그려지지 않아요. React 패러다임 바깥에서 브라우저 API를 만질 때 쓰는 "탈출구"예요.
  • Performance Hooks — useMemo는 비싼 계산 결과를 캐시하고, useCallback은 함수 정의를 캐시해 최적화된 컴포넌트에 그대로 내려줘요. useTransition은 급하지 않은 상태 전환을 블로킹하지 않는 업데이트로 표시할 수 있어요.

직접 만드는 커스텀 훅도 그냥 JavaScript 함수예요. 이름이 use로 시작하게 해서 React가 훅 규칙을 적용하게 하죠.

실제 적용(데이터스케쳐스 관점)

캔버스 에디터에서 상태가 끊임없이 바뀌는 화면은 Hooks가 곧 뼈대예요. 노드 하나하나의 선택 여부나 드래그 중 위치는 로컬 useState로, 노드 좌표 같은 값은 수시로 변하니 useMemo로 계산을 캐시해서 다시 그려도 비싼 연산을 반복하지 않게 해요. 협업 커서처럼 렌더링과 무관하게 유지해야 하는 연결은 useRef로 들고 있죠.

한 가지 중요한 기준이 있어요. useEffect는 "외부 시스템과 동기화"할 때만 쓰는 게 React 공식 입장이에요. 캔버스처럼 실시간 협업 소켓, 타이머, 브라우저 DOM과 붙는 부분이라면 자연스럽게 쓰지만, 문서 상태를 재가공하는 용도로 쓰면 화면이 어디서 왜 다시 그려지는지 추적하기 어려워져요. 그런 부분은 render 중 계산이나 상태 관리 레이어로 옮기는 편이 좋아요.

더 알아보기