[React] Hooks의 종류

출처: 리액트를 다루는 기술 - 개정판

 

1. useState()

- 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줌. 해당 함수의 인자에는 상태의 기본값이 들어감.

 

2. useEffect()

- 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있음.

 

3. useReducer()

- useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용함.

- 현재 상타, 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수. 반드시 불변성을 지켜줘야 함.

- 첫번째 인자로 reducer 함수를 받고, 두번째 인자로 해당 리듀서의 기본값을 넣어준다.

- 이 Hook은 배열을 리턴하고, 첫번째 인자가 상태고, 두번째 인자가 dispatch 함수인 길이가 2인 배열을 리턴한다.

 

4. useMemo()

- 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.

- 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식이다.

 

5. useCallback()

- useMemo와 비슷함. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용. 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다.

- 첫번째 인자에는 생성하고 싶은 함수를 넣고, 두번째 인자에는 배열을 넣는다. 이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다.

- 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다.

 

6. useRef()

- 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 한다.

- useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가리킨다.