21. 커스텀 Hooks 만들기

src 디렉터리 > hooks 디렉터리 > useInputs.js 파일
커스텀 Hooks를 만들 때에는 보통 이렇게 use 라는 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성한다.
useState, useEffect, useReducer, useCallback 등 Hooks를 사용하여 원하는 기능을 구현해주고, 컴포넌트에서 사용하고 싶은 값들을 반환해준다.

22. Context API를 사용한 전역 값 관리

App 컴포넌트에서 onToggle, onRemove가 구현이 되어있고 이 함수들은 UserList 컴포넌트를 거쳐서 각 User 컴포넌트들에게 전달이 되고 있다.
여기서 UserList컴포넌트의 경우 onToggle과 onRemove를 전달하기 위하여 중간 다리역할만 하고 있다.

• 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업은 리액트로 개발을 하다보면 자주 발생할 수 있는 작업이다.
  컴포넌트 한 두개 정도를 거쳐서 전달하는건 큰 불편함이 없지만, 만약 3~4개 이상의 컴포넌트를 거쳐서 전달을 해야 하는 일이 발생하게 된다면 이는 매우 번거로울 것이다!

• 그럴 땐, 리액트의 Context API와 이전 섹션에서 배웠던 dispatch를 함께 사용하면 이러한 복잡한 구조를 해결할 수 있다.

Context 만드는 법

const UserDispatch = React.createContext(null);
createContext의 파라미터에는 Context의 기본값을 설정할 수 있다.
여기서 설정하는 값은 Context를 쓸때 값을 따로 지정하지 않을 경우 사용되는 기본 값이다.

Context를 만들면, Context안에 Provider 라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여
Context의 값을 정할 수 있다.
이 컴포넌트를 사용할 때, value 라는 값을 설정해주면 된다.
이렇게 설정해주고 나면 Provider에 의하여 감싸진 컴포넌트 중 어디서든지 우리가 Context의 값을 다른 곳에서 바로 조회해서 사용할 수 있다.

그리고, UserDispatch를 만들때 다음과 같이 내보내주는 작업을 했다.

export const UserDispatch = React.createContext(null);

=> 이렇게 내보내주면 나중에 사용하고 싶을 때 다음과 같이 불러와서 사용할 수 있다.

import { UserDispatch } from './App';