20221005 React Hooks - useContext

useContext

여러 곳에 쓰이는 데이터를 내려주고 싶을 때 컴포넌트의 단계가 많다면 여러 번 반복해서 Prop을 내려줘야 하는데, 이런 문제점을 프롭 드릴링(Prop Drilling) 이라고 함.

Context는 프롭 드릴링을 해결하기 위해 사용하는 기능

 

React Context는 전역적으로 상태를 관리하는 방법

• 전역을 프롭스로 단계적으로 하려고한다고하면 힘듬
• 컨텍스트가 앱안에서 전역적으로 사용하는 여러 컴포넌트를 쉽게 공유할 수 있도록 해줌
• 전역적인 데이터를 전달하기에 편함
• 상위컴포넌트에서 필요한 값을 단계로별로 통하는게 아니라 바로 넘겨줄 수 있음
• Context로 공유한걸 > useContext로 바로 받아와서 쓸 수 있음

단점 컨텐스트는 꼭 필요할 때만 써야됌 이유

- 컴포넌트를 재사용하기 어려워 질 수 있음

- Prop drilling을 피하기 위한 목적이라면 Componemt Composition(컴포넌트 합성)을 더 간단할 수도 있음

 

1. App.js 에서 컴포넌트에서 Context를 불러와서 모든 하위 컴포넌트에게 필요한지

2. 필요한 하위컴포넌트는 useContext를 사용(프롭스 사용ㄴ)

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext();

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

function Component2() {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 />
    </>
  );
}

function Component3() {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 />
    </>
  );
}

function Component4() {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 />
    </>
  );
}

function Component5() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

 

1. Context 만들기

//Context는 createContext 라는 함수를 통해 만들 수 있음
import { createContext } from 'react';

const LocaleContext = createContext();


// 기본값을 넣어 줄 수도 있음
import { createContext } from 'react';

const LocaleContext = createContext('ko');

2. Context 적용하기

//Context를 쓸 때는 반드시 값을 공유할 범위를 정하고 써야 함
// 이때 범위는 Context 객체에 있는 Provider 라는 컴포넌트로 정해줄 수 있음
// 이때 Provider의 value prop으로 공유할 값을 내려주면 됨.

import { createContext } from 'react';

const LocaleContext = createContext('ko');

function App() {
  return (
    <div>
       ... 바깥의 컴포넌트에서는 LocaleContext 사용불가

       <LocaleContext.Provider value="en">
          ... Provider 안의 컴포넌트에서는 LocaleContext 사용가능
       </LocaleContext.Provider>
    </div>
  );
}

3. Context 값 사용하기

//useContext 라는 Hook을 사용하면 값을 가져와 사용할 수 있음
//이때 아규먼트로는 사용할 Context를 넘겨주면 됨

import { createContext, useContext } from 'react';

const LocaleContext = createContext('ko');

function Board() {
  const locale = useContext(LocaleContext);
  return <div>언어: {locale}</div>;
}

function App() {
  return (
    <div>
       <LocaleContext.Provider value="en">
          <Board />
       </LocaleContext.Provider>
    </div>
  );
}

 

 

 

 

 

참고 및 출저

https://ko.reactjs.org/docs/context.html

Context – React

 

https://www.w3schools.com/react/react_usecontext.asp

React useContext Hook

코드잇 - React로 데이터 다루기 강의