React Hook이란 무엇인가

서론

 React Hook은 컴포넌트 계층 구조를 변경하지 않고 상태 관련 로직을 재사용할 수 있도록 도와주는 기능이다. 이를 통해 컴포넌트의 로직을 더 작은 단위로 나눌 수 있으며, React를 클래스 없이 사용할 수 있게 한다. 또한 Hook은 Custom Hook을 통해 특정 로직을 추상화하고 여러 컴포넌트에서 재사용할 수 있도록 만들어준다.

Hook을 쓰는 이유

 Hook이 도입된 이유는 여러 가지다. 우선 stateful한 로직을 컴포넌트 간에 재사용하기 어려운 문제를 해결하기 위함이다. Hook을 사용하면 상태 로직을 컴포넌트에서 분리하여 독립적으로 테스트하고 재사용할 수 있다. 또한 복잡한 컴포넌트를 더 이해하기 쉽게 만드는 데에도 유용하다. 기존의 lifecycle method를 기준으로 컴포넌트를 나누는 대신, 관련된 로직 단위로 컴포넌트를 나눌 수 있기 때문이다.

 클래스 사용의 복잡성을 줄이는 것도 Hook 도입의 중요한 이유다. 클래스는 JavaScript의 this를 이해해야 하고, hot reloading이나 minification 과정에서 문제를 일으킬 수 있다. Hook은 이러한 문제를 해결하며 코드의 가독성을 높이고 학습 곡선을 완화한다. 기존에는 상태 로직을 재사용하기 위해 Higher-Order Components나 Render Props를 사용했지만, 이는 코드가 복잡해지는 단점이 있었다. Hook은 이러한 한계를 극복하고 더 간단한 방식으로 상태 로직을 재사용할 수 있게 한다.

Hook의 특징

 Hook의 특징으로는, 우선 Hook 간 값 전달이 가능하다는 점이 있다. 예를 들어, useState에서 반환된 값을 useEffect가 읽을 수 있다. 이는 함수 스코프에서 자연스럽게 이루어진다.

 각 useState 호출은 독립적인 상태를 가지므로, 한 컴포넌트에서 같은 Hook을 여러 번 사용할 수 있다. React는 Hook으로 관리되는 상태를 재렌더링 간에도 유지하며, 상태를 업데이트하면 기존 값을 병합하지 않고 대체한다. 이러한 동작 방식은 로직을 Custom Hook으로 추출하기 쉽게 만든다.

 다만 Hook은 호출 규칙이 엄격하다. 무조건적으로 호출되어야 하며, 조건문 안에서 Hook을 호출할 수 없다. 모든 Hook 호출은 조건문 바깥에 있어야만 한다. 또, Hook은 클래스 기반의 this.state처럼 객체 속성에 접근하지 않고 한 번에 하나의 변수만 관리하므로 Virtual Machine에서 최적화가 쉽다.

Hook의 단점

 하지만 Hook에도 단점이 있다. 렌더링마다 이벤트 핸들러를 재생성해야 최신 상태와 props를 참조할 수 있는데, 이는 React.memo나 PureComponent의 효과를 감소시킬 수 있다. 또한 closure로 인해 useEffect나 useCallback에 전달된 함수가 이전 상태나 props를 캡처하는 문제가 발생할 수 있다. 특히 inputs 배열에 필요한 변수를 빠뜨릴 경우 이러한 문제가 더 심각해진다.

 React는 내부 전역 상태를 사용해 현재 렌더링 중인 컴포넌트를 결정하므로, 이러한 동작 방식은 “순수하지 않다”고 느껴질 수 있다. React.memo를 사용하더라도, 단순히 이전과 새 props만 비교할 수 있을 뿐 상태 업데이트가 중요하지 않을 경우 리렌더링을 건너뛰기 어렵다.

 마지막으로, 함수형 상태 저장 시 useState(() => myFunction)처럼 lazy initializer를 사용해야 하는 경우가 있다. 이는 함수와 값 타입을 런타임에서 구분하기 어렵기 때문이다.

결론

 React Hook은 React 개발의 패러다임을 크게 변화시켰으며, 이를 통해 상태 관리와 로직 재사용이 더 쉬워졌다. 하지만 단점도 존재하므로 이를 잘 이해하고 적절히 활용하는 것이 중요하다.

참고자료

• React 공식 문서: Hooks at a Glance

• React RFC 문서: text/0068-react-hooks.md

• React 공식 문서: Using the Effect Hook

• React 공식 문서: Building Your Own Hooks