[React] React Hooks(5) - useContext + Context API

• 별코딩 유튜브 강의 영상
  https://youtu.be/LwvXVEHS638?list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO

Context

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

보통 부모 컴포넌트 -> 자식 컴포넌트로 props를 전달한다.

엄청 큰 App이 있을 때 컴포넌트들이 공통으로 필요로 하는 데이터가 있다면
(ex. 현재 로그인 중인 사용자, 테마)
일일이 단계별로 props를 전달한다는건 너무 귀찮은일이다.

예를 들어 C와 E가 Data를 필요로 할 때 부모인 A, B, D는 필요하지않은 데이터를 전달받아 자식에게 전달해줘야하는 문제가 생긴다.

리액트는 이 문제를 해결할 수 있는 Context를 제공한다.

어떤 컴포넌트든 useContext를 사용하면 부모에게서 props로 전달 전달 받지않고도 데이터를 바로 사용할 수 있다.

👀 하지만 Context를 사용하면 컴포넌트 재사용이 어려워질 수 있기때문에 꼭 필요할 때만 사용해야한다.

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

[예제1] 다크모드 테마, 사용자 이름 전달 받기

- App 구조

테마 정보를 위한 Context와 사용자 정보를 전달하기위한 context를 context 폴더에 생성해준다.

ThemeContext.js

import { createContext } from 'react';

export const ThemeContext = createContext(null);

UserContext.js

import { createContext } from 'react';

export const UserContext = createContext(null);

• 초기값으로 입력한 값은 ThemeContext.Provider 태그로 감싸지않은 경우에 사용된다. value로 값을 전달하는 경우에는 초기값이 필요하지않기때문에 null로 설정한다.

App.js

import { useState } from 'react';
import './App.css';
import Page from './components/Page';
import { ThemeContext } from './context/ThemeContext';
import { UserContext } from './context/UserContext';

function App() {
  const [isDark, setIsDark] = useState(false);
  
  return (
    <UserContext.Provider value={'사용자'}>
    // {}로 감싸서 object 생성후 value로 전달
    <ThemeContext.Provider value={{ isDark, setIsDark}}>
    	<Page />
   	</ThemeContext.Provider>
	</UserContext.Provider>
  );
}

export default App;

Page.jsx

• Page컴포넌트는 isDark나 setIsDark 정보가 전혀 필요하지않은 컴포넌트이다. props 전달을 이용했다면 여기에도 props를 받아와서 다른 자식 컴포넌트들에게 전달해주어야했겠지만, Context를 이용함으로써 Page를 거치지않고도 자식 컴포넌트들이 값을 받아올 수 있게되었다.

Header.jsx

Content.jsx

Footer.jsx

• ThemeContext.Provider 태그가 감싸는 모든 하위 컴포넌트에서 useContext를 이용해 ThemeContet 객체에 접근할 수 있다.

코드 정리

1. Context 생성

import { createContext } from 'react';

export const AbcContext = createContext(null);

2. Provider로 감싸기, value로 전달

import { AbcContext } from './context/ThemeContext';
...
	<AbcContext.Provider value={전달값}>
    	// ....
   	</AbcContext.Provider>
...

3. useContext로 가져오기

import { AbcContext } from '../context/AbcContext';
...
	const abc = useContext(AbcContext);
...