[React] Context

Context 란?

컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능이다.

주로 전역적으로 필요한 값을 다룰 때 사용하며, 이는 꼭 전역일 필요는 없다.

컴포넌트 간에 데이터를 props가 아닌 또 다른 방법으로 전달해주는 방법이다.

 

props로만 전달한다면 발생하는 문제점들

1. props drilling이 발생

function App() {
  return <A value="Hi!" />;
};

function A({ value }) {
  return <B value={value} />;
};

function B({ value }) {
  return <C value={value} />;
};

function C({ value }) {
  return <D value={value} />;
};

function D({ value }) {
  return <Last value={value} />;
};

function Last({ value }) {
  return <div>Received: {value}</div>;
};

2. 여러 종류의 자식 컴포넌트가 특정 값에 의존하는 문제

 

function App() {
  return (
    <MyComponent value="Hi!!" />
  )
};

function MyComponent({ value }) {
  return (
    <div>
      <FirstComponent value={value} />
      <SecondComponent value={value} />
      <ThirdComponent value={value} />
    </div>
  )
};

function FirstComponent({ value }) {
   return (
     <div>First Component : "{value}"</div>
   )
};

function SecondComponent({ value }) {
   return (
     <div>Second Component : "{value}"</div>
   )
};

function ThirdComponent({ value }) {
   return (
     <div>Third Component : "{value}"</div>
   )
}

// 이렇게 여러 종류의 자식 컴포넌트가 특정 값에 의존하기도 한다.

 

이를 해결하기 위한 Context

사용법

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


// Context객체 안에는 Provider라는 컴포넌트가 들어있다.
// 그 컴포넌트간에 공유하고자 하는 값을 value 라는 Props로 설정하면 자식 컴포넌트들에서 해당 값에 바로 접근할 수 있다.

function App() {
  return (
    <MyContext.Provider value='hey~ world!'>
    </MyContext.Provider>
  )
}


// 그리고 원하는 컴포넌트에서 useContext라는 hook을 사용하여 Context에 넣은 값에 바로 접근할 수 있다.

import { createContext, useContext } from 'react';
function Message() {
  const value = useContext(MyContexnt);
  return (
    <div>{value}</div>
  )
}

 

적용 예시

1. props drilling이 발생했던 코드에서 context 적용

import { createContext, useContext } from 'react';
const MyContext = createContext();

function App() {
  return (
  	<MyContext.Provider value="hey world~!">
      <A />
    </MyContext.Provider>
  )
}

function A() {
  return <B />
}

function B() {
  return <C />
}

function C() {
  return <D />
}

function D() {
  return <Last />
}

function Last() {
  const value = useContext(MyContext);
  return <div>{value}</div>
}

export default App;

 

2. 여러 종류의 자식 컴포넌트가 특정 값에 의존하는 문제를 context 적용

import { createContext, useContext } from 'react';
const MyContext = useContext();

function App() {
  return (
    <MyContext.Provider value="Hi!!!">
      <MyComponent />
    </MyContext.Provider>
  )
}

function MyComponent() {
  return (
    <div>
      <FirstComponent value={value} />
      <SecondComponent value={value} />
      <ThirdComponent value={value} />
    </div>
  )
};

function FirstComponent() {
   const value = useContext(MyContext);
   return <div>First Component : "{value}"</div>
};

function SecondComponent() {
   const value = useContext(MyContext);
   return <div>Second Component : "{value}"</div>
};

function ThirdComponent() {
   const value = useContext(MyContext);
   return <div>Third Component : "{value}"</div>
}

export default App;

 

캭

 

Provider를 사용하지 않는 경우는 default 인자를 넣어주자.

const MyContext = createContext('default value');

 

 

 

context를 사용하여 재사용 할 수 있는 버튼 예시