[React] 훅(Hook)

 

1. 훅(Hook)

기존 함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드가 간결하고 별도로 state를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없었는데 함수 컴포넌트에 이런 기능을 지원하기 위해 나온 것이 훅

-> 훅을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현할 수 있음

 

리액트의 훅: 리액트의 state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것으로 이때 실행되는 함수를 훅이라고 부름

 

훅의 이름은 모두 use로 시작되며, 커스텀 훅을 만들어서 사용할 수도 있는데 훅의 규칙에 따라 이름 앞에 use를 붙여서 훅이라는 것을 나타내야함

 

2. 자주 쓰이는 훅(hook) 종류

 

1) useState

[React] 훅(Hook) - useState

2) useEffect

[React] 훅(Hook) - useEffect

3) useMemo

[React] 훅(Hook) - useMemo

4) useCallback

[React] 훅(Hook) - useCallback

5) useRef

[React] 훅(Hook) - useRef

6) useNavigate()

[React] 훅(Hook) - useNavigate

7) useParams()

[React] 훅(Hook) - useParams

 

 

3. 훅의 규칙

 

1) 훅은 무조건 최상의 레벨(Top Level)에서만 호출해야 함

- 따라서 반복문이나 조건문 또는 중첩된 함수들 안에서 훅을 호출하면 안됨

- 훅은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출 되어야 함

 

2) 리액트 함수 컴포넌트에서만 훅을 호출해야 함

- 일반적인 자바스크립트 함수에서 훅 호출하면 안됨

- 훅은 리액트 함수 컴포넌트에서 호출하거나 커스텀 훅에서만 호출 가능

 

 

 

4. 커스텀 훅(Custom Hook)

 

1) 필요성

- 리액트에서 기본적으로 제공되는 훅 이외에 추가적으로 필요한 기능이 있는 겨웅

- 여러 컴포넌트에서 반복적으로 사용되는 로직을 훅으로 만들어 재사용하기 위함