useContext

props로 부모 컴포넌트에서 자식 컴포넌트로 계속 내려주게 되면 중간에 내려주기 위해서만 props를 받게 되는 컴포넌트들이 생긴다. 부모 -> 자식 -> 자식 -> 자식 -> props 가 정말 필요한 자식

그리고 하위로 계속 내려줘야 하기 때문에 prop drilling 이 생긴다.

그래서 필요한 것이 context API 의 useContext hook이다. 

 

useContext를 사용하면 전역 데이터를 관리할 수 있고, 중간에 있는 컴포넌트에게 값을 넘겨주지 않아도 된다.

 

 

context 생성

1. src/context 폴더를 만든 후 ThemeContext.js 파일을 만든다.
2. createContext import
3. createContext(초깃값); 으로 생성한다.

import { createContext } from "react";

export const ThemeContext = createContext("dark");

 

context 전달

context  import

부모 컴포넌트에서 자식 컴포넌트를 Provier value=값으로 할당 후 감싸준다.

<ThemeContext.Provider value="dark">
  <TodoList />
</ThemeContext.Provider>

 

context 사용

useContext, context  import

useContext(context명) 으로 값을 사용할 수 있다.

const data = useContext(ThemeContext);
console.log(data);

결과 이미지

 

주의사항!

provider에서 제공한 value의 값이 변경되면 useContext로 사용 중인 컴포넌트가 모두 리렌더링 되기 때문에 주의해서 value를 관리해야 한다.

context를 사용하면 컴포넌트 재사용이 어려워지므로 필요할 때만 사용해야 한다.