[React] useContext 정리

※ useContext

  - 자식 컴포넌트의 DEVS가 많은 경우 최상위 컴포넌트에서 최하위 자식 컴포넌트까지 값을 일일이 전달하는 것이 비효율적
  - 이처럼 Prop을 통해서 중간단계의 컴포넌트들이 계속 값을 전달하는 상황 (prop Drilling)
  - 이때 Context API를 활용한 useContext hook을 활용하면 컴포넌트 외부에 전역으로 특정 값을 관리하며 자식 컴포넌트에게 바로 값 전달 가능

createContext : context 생성 후 Provider를 통해 전역으로 특정 값을 전달 가능
useContext : createContext로 생성된 값을 원하는 자식 컴포넌트에서 자유롭게 호출 가능

사용 순서)

1. 전역으로 관리할 저장객체 생성
   -  createContext를 이용해서 초기값을 null로 지정한 빈 객체를 생성
   -  해당 빈 객체는 추후 루트 컴포넌트인 App에서 Provider로 해당 값을 전역으로 자식요소에 전달

 

예제)

import { createContext } from 'react';
export const LoginContext = createContext(null);

2. 전역으로 생성한 빈 저장객체에 원하는 값을 저장
   -  null로 빈값이 저장되어 있는 LoginContext에 Provider로 원하는 값을 value로 지정해서 전달
   -  해당 LoginContext가 전체 컴포넌트들을 감싸고 있기 때문에 모든 자식 컴포넌트들은 추후 useContext를 이용해서 해당 값에 자유롭게 접근 가능

 

예제)

<LoginContext.Provider value={{ Login, setLogin }}>
  <main>
  <Header />
  <Content />
  </main>
</LoginContext.Provider>

   
3. 전역 정보값을 가져와서 로그인, 로그아웃 버튼 클릭시 해당 전역 정보값을 자유롭게 변경
   -  useContext를 이용해서 LoginContext값을 자유롭게 사용 가능

 

예제)

const login = useContext(LoginContext);

return (
    <article>
    <button onClick={() => login.setLogin(true)}>login</button>
    <button onClick={() => login.setLogin(false)}>logout</button>
    </article>
);