context Context API를 이용하여 전역 상태 공유하기

[주인장]

Context

- 모든 컴포넌트에서 공유할 수 있는 상태를 저장하는 방법

Context 의 필요성

- Context 는 모든 컴포넌트에서 상태를 공유하기 위해 필요합니다.
- 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달해야하는 경우
- 컴포넌트 2계층 이상으로 데이터를 전달해야하는 경우 

- 상태를 관리하다 보면 부모 컴포넌트에서 자식 컴포넌트 단방향으로만 데이터를 전달하는 경우 외에도 자식에서 부모로, 또는 컴포넌트 여러 계층을 넘어 데이터를 전달해야하는 경우가 있습니다.
- Global State를 사용하면 코드가 복잡해질 수 있습니다. 또한, Global State 에 대한 접근을 제어하기가 어렵습니다.
- 부모-자식 관계를 사용하면 컴포넌트의 결합도가 높아질 수 있습니다. 또한, 부모 컴포넌트가 변경되면 자식 컴포넌트도 변경해야 합니다.

Context의 장점 

- 데이터를 쉽게 공유할 수 있습니다.
- 코드가 간결해집니다.
- 유지 관리가 쉽습니다.

- 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는, props 사용합니다. 그런데, 이렇게 단순히 1계층 정도의 관계에서는 props 사용하는 것이 가장 간단하겠지만, 2계층, 3계층.. .N계층 이상으로 컴포넌트간의 데이터 전달이 필요하다면, 계속적으로 props 를 내려주게 되어 코드가 복잡해지고 유지보수성이 떨어집니다.

- 컨텍스트를 사용하면, 상위 컴포넌트에서 한 계층씩 계속적으로 props 를 내릴 필요없이 모든 컴포넌트에서 바로 데이터를 전달 받을 수 있습니다. 이렇게 하면, props 를 반복적으로 내릴 필요없어 코드도 간결해지고 유지보수성도 올라갑니다.

Context 사용 목적
- 컨텍스트는 모든 컴포넌트에서 데이터를 전달받을 수 있는 개념입니다. 그렇기 때문에, 여러 컴포넌트에서 공통적을 사용하거나 자주 사용해야하는 데이터에 적합합니다.
- 예를 들면, 로그인 여부와 로그인 정보 등이 있겠습니다. 또한, 페이지 이동을 여러 번 하면서 사용자로부터 조금씩 여러 데이터를 입력받는 UI 의 경우에도, 매번 페이지 이동하면서 파라미터를 넘길 필요 없이 컨텍스트를 이용해도 좋겠습니다.

Context 주요 개념
- Provider : Context를 제공하는 컴포넌트입니다.
- Consumer : Context에서 데이터를 가져오는 컴포넌트입니다.
- Context Value : Context에서 제공하는 데이터입니다.

Context 적용과정
React Context 를 사용하기 위해서는 다음과 같은 단계로 진행합니다.
1. Context 를 생성합니다.

import { createContext } from 'react';
const MyContext = createContext();
export default MyContext;

2. Provider 컴포넌트를 정의합니다.

// MyProvider.js
import React, { useState } from 'react';
import MyContext from './MyContext';

const MyProvider = ({ children }) => {
  const [myState, setMyState] = useState('Hello Context~!');

  return (
    <MyContext.Provider value={{ myState, setMyState }}>
      {children}
    </MyContext.Provider>
  );
};

export default MyProvider;

3. Context 를 전달받아 사용할 컴포넌트들을 정의된 Provider 를 통해 지정합니다.

// App.js

import React from 'react';
import MyClassComponent from './MyClassComponent';
import MyFunctionalComponent from './MyFunctionalComponent';
import MyProvider from '.contexts/MyProvider';

const App = () => {
  return (
    <MyProvider>
      <div>
        <MyClassComponent />
        <MyFunctionalComponent />
      </div>
    </MyProvider>
  );
};

export default App;

4. Consumer 컴포넌트 또는 useContext 사용하여 Context 에서 데이터를 가져옵니다.

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

// 함수 컴포넌트에서 useContext 사용
const MyFunctionalComponent = () => {
  const { myState, setMyState } = useContext(MyContext);

  return (
    <div>
      <p>{myState}</p>
      <button xxxxonClick={() => setMyState('Updated!')}>Update State</button>
    </div>
  );
};

export default MyFunctionalComponent;