useContext ?

React의 Context API

props 로 데이터를 일일히 전달하지 않아도,

해당 데이터가 필요한 하위 컴포넌트 어디서든 사용이 가능하게 만들어준다. (전역적 공유)

 

기본적으로 리액트 어플리케이션에서 데이터는 props 를 통하여 부모에서 자식에게 전달되지만,

여러 컴포넌트들에게 props 를 전달해줘야 하는 경우 context 를 사용하면 명시적으로 props 를 전달하지 않아도

값을 공유할 수 있게 해주는 것이다.

• createContext : context 객체 생성
• Provider : 생성한 context 를 하위 컴포넌트에게 전달한다
• Consumer : context 의 변화를 감시하는 컴포넌트

import React, { createContext } from "react";

export const AppContext = createContext(초기값);

     <AppContext.Provider value={전달해줄 값}>
        <div>
         // 코드 작성
        </div>
      </AppContext.Provider>

import { AppContext } from "./App";

<AppContext.Consumer>
        {(전달해준 값) => (
          <>
            
          </>
        )}
      </AppContext.Consumer>

대충 이런 형태로 사용된다고 함

 

 

useContext 를 사용해준다면?

context 를 생성하고 Provider 를 통하여 전달하는 코드는 그대로지만

AppContext 를 사용하는 과정에서 <AppContext.Consumer> 와 같은 코드를 사용하여 복잡하게 작성하지 않고

const 불러줄값 = useContext(AppContext);

형태로 사용할 값을 불러와서 바로 사용이 가능해진다.

 

즉,

import React, { createContext } from "react";

export const UserContext = createContext(null);

///

<UserContext.Provider value={users}>
    <div>
     // 코드 작성
    </div>
</UserContext.Provider>

///

const users = useContext(UserContext); 로 사용!

 

 

 

Context 는 꼭 필요할 때만

컴포넌트를 재사용하기 어려워질 수 있으므로!

-> 단순히 props drilling 을 피하기 위해서 사용하는 것이라면 컴포넌트 합성을 고려할 것

 

그리고 Provider 에서 제공한 value 가 변경되면 useContext 를 사용하고 있는 모든 컴포넌트가 리렌더링 되므로 

메모이제이션이 중요하다.