React Hook 정리 - useContext

사용배경

React의 Component Tree 간 props를 통해 값을 전달할 때 발생할 수 있는 복잡도를 줄이고자 제공된 기능 (Prop Drilling)

Context를 통해 App 안에서 전역적으로 사용되는 데이터를 여러 컴퍼넌트끼리 공유할 수 있는 방법을 제공

다만, Context를 사용한 코드는 컴포넌트를 재사용하기에 좋지 않아 필요한 경우에만 사용한다.

(공식문서: 단순히 Prop Drilling 을 피하기 위해서라면 Component Composition 사용을 제안하고 있다.)

 

예) 다크모드 테마의 경우 전역적으로 사용되는 상태값이나 굳이 모든 컴퍼넌트에서 props를 통해 받을 필요는 없는 것으로 가정

// ThemeContext.js
import { createContext } from 'react';

export const ThemeContext = createContext(null);

import { ThemeContext } from '..../ThemeContext/';

function App() {
	...
	return(
		<ThemeContext.Provider value={ { darkMode, setDarkMode } }> // value 안에 전달하고자하는 상태 전달
			// ThemeContext.Provider가 감싸는 모든 하위 컴퍼넌트는 value에 접근할 수 있게 된다.
			<ChildComponent />
		</ThemeContext.Provider>
	)
}

export default App;

// 상태를 받아올 하위 컴퍼넌트
import React, { useContext } from 'react';
import { ThemeContext } from '.../ThemeContext';

const ChildComponent = () => {
	const data = useContext(ThemeContext);
	// 또는 const { darkMode, setDarkMode } = useContext(ThemeContext); (feat. Object Destructing)
    
    return(
		<div>darkMode ? "DarkMode" : "LightMode"</div>
    )
};

export default ChildComponent;

만약 context 구성 시, 초기 값을 설정했을 때, Provider로 감싸주는 부분이 없다면 (= value가 없다면) 이 초기값을 받아오게 된다.