useContext

리액트의 데이터 흐름은 Component Tree형태이고 위에서 아래로 흐른다. 부모와 자식 컴포넌트는 props를 이용해 단계별로 전달한다.

 

데이터를 전달해야할 자식 컴포넌트가 많을 때는 어떻게 해야 할까?

 

전역적으로 필요한 공통 컴포넌트가 필요한 순간이 있다.

테마, 언어 등의 데이터가 있다. 하지만 이 데이터를 props를 이용해 단계별로 전달을 하기에는 무리가 있다.

 

이러한 문제를 해결하기 위해 React에서 Context API를 제공한다.

앱 안에서 전역적으로 사용되는 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다.

즉, props로 일일히 데이터를 전달하지 않아도 데이터를 가진 상위 컴포넌트가 어느곳이든 위치해 있는 하위 컴포넌트들에게 전달할 수 있다. 

 

Prop Drilling

상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달할 때 모든 중간 컴포넌트들을 거쳐 단계별로 전달 하는 과정을 말한다. 가장 하위에 있는 컴포넌트만 데이터가 필요함에도 불구하고 중간 컴포넌트들을 굳이 거쳐가서 전달을 해야한다. props와 코드가 길어지고 중간에 이상한 데이터가 전달되거나 수정해야 할 때 컴포넌트들을 찾아 해결할 때 어려움을 겪는다.

 

context는 필요할 때만 사용해야 한다.

context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있다.

Prop drilling을 피하기 위한 목적이라면 Component Composition(컴포넌트 합성)을 먼저 고려한다.

 

const ThemeContext = createContext('Hi')

<ThemeContext.Provider value={{isDark, setIsDark}}>
	<Page />
</ThemeContext.Provider>

Context의 Provider는 value prop을 받고 이 안에는 전달하고자 하는 데이터를 작성한다.

ThemeContext.Provider가 감싸는 모든 하위 컴포넌트는 props를 사용하지 않고 value안에 있는 데이터를 전달할 수 있다.

 

만약 ThemeContext.Provider로 감싸주지 않으면 초기값인 Hi가 전달된다.

value로 전달하면 초기값이 필요없다.

 

 

데이터를 사용하려는 component에는 어떻게 적용할까?

import { ThemeContext } from '';

const { isDark } = useContext(ThemeContext)

style={{ backgoundColor: isDark ? 'black' : 'white' }}

import user from '';

const user = useContext(UserContext);

<p>{user}</p>

데이터가 있는 부모 경로를 import 한 후 useContext를 이용해서 데이터를 사용한다.