Hooks

1. useMemo

useMemo is a React Hook that lets you cache the result of a calculation between re-renders.

비싼 계산 결과를 캐싱하기 위해 사용한다. 리액트에서 비싼 계산 결과란 주로 렌더링에 사용될 데이터의 계산, 그리고 렌더링 그 자체(함수형 컴포넌트)를 의미한다.

매 리렌더링마다 같은 결과를 내놓는 계산은 기록해두고 값만 가져올 수 있도록 '메모' 하는 것이다. 따라서 해당 계산이 비싸면 비싼 것일수록 메모하는 효과가 크다.

useMemo - React docs

예제

2. useCallback

useCallback is a React Hook that lets you cache a function definition between re-renders.

메모와 매우 비슷하지만 다르다. 메모는 함수의 실행 '결과' 를 캐싱하지만 콜백은 함수의 '선언'을 캐싱한다.

그런데 함수의 선언을 캐싱하는게 뭐 그리 최적화에 효과가 있는 일일까? 싶다.

그렇다. 왜냐하면 이것이 추가적인 리렌더링을 막아주는 상황이 존재하기 때문..

함수를 prop으로 받아서 사용하거나, prop으로 전달되는 데이터를 하위 컴포넌트의 함수에서 사용하고 있는 경우 해당 prop이 변경되면 '함수의 선언이 재발생' 하면서 불필요한 리렌더링이 일어나게 된다.

예제를 참고해보자.

useCallback - React docs

예제

3. useReducer

useReducer is a React Hook that lets you add a reducer to your component.

redux와 거의 동일한 사용방식으로, 상태를 reducing 하는 방식으로 관리할 수 있도록 도와준다.

그런데 '상태관리' 라고? 여태 상태관리는 useState로 해오지 않았나?

사용해보면 알겠지만 장단점이 존재한다. 궁금하다면 여기를 읽어보자.

We recommend using a reducer if you often encounter bugs due to incorrect state updates in some component, and want to introduce more structure to its code.

You don't have to use reducers for everything. feel free to mix and match! You can even useState and useRedcuer in the same component.

useReducer - React docs
Extracting state logic into a reducer - React docs

4. useContext

useContext is a React Hook that lets you read and subscribe to context from your component.

'컨텍스트' 란 말 그대로 문맥을 의미한다. 어떤 데이터의 문맥을 사용한다는 말이다. 그리고 그 문맥은, 보통 그렇듯, 위에서 물려받는다. 컴포넌트는 상위 컴포넌트를 의미한다.

prop drilling을 하지 않을 수 있도록 도와주는 고마운 친구이다.

useContext - React docs