context API_React

Context API

• 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있다
• 이 값은 꼭 상태를 가르키지 않아도 된다.
• 이 값은 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 심지어 DOM 일 수도 있다

Context 를 만들 땐 React.createContext() 라는 함수를 사용한다
const UserDispatch = React.createContext(null);

createContext 의 파라미터에는 Context 의 기본값을 설정할 수 있다.
여기서 설정하는 값은 Context 를 쓸 때 값을 따로 지정하지 않을 경우 사용되는 기본 값 이다.
Context 를 만들면, Context 안에 Provider 라는 컴포넌트가 들어있는데 이 컴포넌트를 통하여 Context 의 값을 정할 수 있다. 이 컴포넌트를 사용할 때, value 라는 값을 설정해주면 된다.
<UserDispatch.Provider value={dispatch}>...</UserDispatch.Provider>
이렇게 설정해주고 나면 Provider 에 의하여 감싸진 컴포넌트 중 어디서든지 우리가 Context 의 값을 다른 곳에서 바로 조회해서 사용 할 수 있다

• 내보내기
  export const UserDispatch = React.createContext(null);
• 불러오기
  import { UserDispatch } from './App';

export const UserDispatch = React.createContext(null);

function App() {
  return (
    <UserDispatch.Provider value={dispatch}>
    </UserDispatch.Provider>
  );
}
//userList.js
import React, { useContext } from 'react';
import { UserDispatch } from './App';

const UserList = ({ users }) => {
  const dispatch = useContext(UserDispatch);

  return (
    <button
        onClick={() => {
        dispatch({ type: 'TOGGLE_USER', id: users.id });
        }}
    >
      {users.username}
     </button>
  )
}