[React] Hooks & Custom Hooks

Hook은 리액트 버전 16.8부터 새로 추가된 요소로, class를 작성하지 않고도 state와 다른 react 기능을 사용할 수 있도록 해준다. 리액트로 개발을 할 때 자주 사용하는 useState() 와 useEffect()도 Hook의 한 종류이다.

useState()

useEffect()

 

Hook을 사용하는 이유

hook을 사용하지 않고 리액트로 개발 시, 크게 3가지의 문제점이 있다고 한다.

1. 컴포넌트 사이에서 상태 로직을 재사용하기 어려움

하지만 hook을 사용하면 상태 관련 로직을 재사용할 수 있으며, 독립적인 테스트와 재사용이 가능해진다.

2. 복잡한 컴포넌트들은 이해하기 어려움

서로 비슷한 일을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다.

3. class는 사람과 기계를 혼동시킴

class를 사용하면 this 같은 키워드가 어떻게 작동하는 지를 알아야 하는데, 이로 인해 사용자들이 혼란스러워하는 경우가 종종 발생하며 코드의 재사용과 구성을 어렵게 만들었다고 한다.

 

그럼 기존 코드를 Hook을 사용하는 코드로 다 갈아엎어야 할까?

그렇진 않다. 

이전 버전과의 호환성도 문제가 없고, 기존 React 컨셉을 대체하지 않기 때문에 선택적으로 사용하면 된다. 그러니까 Hook이 필요한 컴포넌트 안에서만 추가적으로 사용하고, 당장 필요하지 않다면 굳이 쓸 필요는 없다는 것이다.

또한, 리액트에서 class를 제거할 계획은 없다고 한다. (제거하면 페이스북도 수만개의 class 컴포넌트들을 hook으로 재작성해야 한다고 한다..)

 

Hook 규칙

1. 최상위(at the Top Level)에서만 Hook을 호출해야 함
2. 오직 React 함수 내에서 Hook을 호출해야 함

훅들은 여러번 사용될 수 있는데, 리액트는 이 훅들을 호출되는 순서대로 저장해놓기 때문에, 매 렌더링마다 훅은 순서대로 호출된다. 만약 조건문이나 반복문 안에서 훅을 사용하면 조건에 따라 훅이 실행되지 않는 경우가 생길 수도 있고, 그러면 렌더링 시 리액트가 기억해놓은 호출 순서가 꼬여서 버그가 발생할 수도 있다. 그리고 일반적인 js 함수에서는 hook이 실행되지 않는다고 한다.

---

Custom Hook 만들기

자신만의 hook을 만들면, 반복되는 로직을 쉽게 재사용할 수 있게 된다.

Custom Hook의 이름은 use로 시작되어야 하며, 만드는 방법은 다음과 같다.

1. Hook을 사용하여 원하는 기능 구현
2. 컴포넌트에서 사용하고 싶은 값들을 반환

 

---

참고 문서

https://ko.reactjs.org/docs/hooks-intro.html 

Hook의 개요 – React