Context API

https://www.youtube.com/watch?v=LwvXVEHS638

본 포스팅은 해당 영상을 기반으로 작성되었습니다.

Context란 무엇인가

Context : react component 간에 어떠한 값을 공유할 수 있게 해주는 기능

• 주로 전역적으로 global하게 필요한 값을 다룰 때 사용된다

• ex) 현재 로그인된 사용자 정보
  

• 이러한 전역적인 data를 props로 단계적으로 일일이 전달을 해야한다면 무척 bad..

∴ React는 이러한 문제점을 간편하게 해결해주는 Context API를 제공해준다

이렇게 상위 component에서 정보를 가지고 있고, 해당 정보가 필요한 하위 component에게 이를 전달해줄 수 있다는 것!

useContext 개념 설명

Prop Drilling (bad way😒)

다음 그림을 통해 예시를 들어보겠다.

App이라는 상위 컴포넌트는 A와 B라는 컴포넌트를 자식으로 가지고 있다. 여기서 App 컴포넌트의 어떠한 data를 state로 가지고 있다고 가정해보겠다.

해당 data를 제일 아래에 있는 E에게 넘겨주기 위해서는 Prop Drilling을 통해 아래로 계속해서 넘겨주는 불편한 상황이 발생한다.

∴ data는 모든 중간 component들을 거쳐가야한다.

∴ data에 에러가 발생한다면, 이를 찾는데 문제가 발생하게 될 것

useContext API 사용 (good way😊)

props 대신 context를 사용해서 data를 공유하는 방법이다.

그러면 한 곳에 있는 data를 모든 자녀component들에게 "필요한 사람~" 이렇게 방송이 가능해진다.

그럼 해당 data가 필요한 자녀 components는 useContext Hook을 사용해서 그냥 받아오기만 하면 되는 것!!

useContext : context로 공유한 data를 쉽게 받아올 수 있게 도와주는 역할

Context의 주된 목적

: 다양한 level에 있는 컴포넌트들에게 전역적인 data를 전달하기 위함

UseContext 사용 예시

context 폴더 내에 ThemeContext.js를 만든다

import {createContext} from "react";

export const ThemeContext = createContext(null);

App.js로 가서 해당 context를 사용한다.

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

function App() {
	const [isDark, setIsDark] = useState(false);
    
    return (
    	//value 안에는 Provider로 감싼 하위 컴포넌트들이 접근 가능한 전역 변수 값들을 넣음
    	<ThemeContext.Provider value={{isDark, setIsDark}}>
        	<Page />
        <ThemeContext.Provider>
        //해당 Provider 로 감싸져 있는 Page라는 하위컴포넌트는 isDark, setIsDark를 접근 가능
    );
}

export default App;

Header.js에 가서 해당 값을 사용한다.
해당 js에서는 2개의 값들 중 isDark 값만 필요로 한다.

import React, {useContext} from 'react';
import {ThemeContext} from '../context/ThemeContext';

const Header = () => {
	const {isDark} = useContext{ThemeContext};