[React] Context - context란? context 활용하기

이번 글은 context에 대한 설명글이다.

---

 

[ context란? ]

context : 데이터를 조상→자식 으로 전달

(반복적인 props 전달하는 과정이 없어짐)

=> 데이터를 공유할 범위를 선정해줘야함

 

 

---

 

[ Context 사용법 ]

 

1) context 생성하기

=> createContext를 임포트 한 후, createContext()를 사용해 context를 만듬

// MyContext

import { createContext } from 'react';

const MyContext = createContext();

export default MyContext;

* context 초기값 지정하기 : ex. createContext('initial-context');

 

 

 

 

2) 생성한 context 배치하기 (context 범위 지정하기)

=> 생성한 context를 사용할 Provider에 생성한 context의 Provider를 사용할 컴포넌트에 배치해줌

=> value로 전달한 값이 Context.Provider의 내부의 자식요소들로 데이터가 전달됨

* Context 생성 시, 그 안에 Provider라는 컴포넌트가 자동으로 생성됨

// App

function App() {
  const [value, setValue] = useState('hello');

  return (
    <div>
      <MyContext.Provider value={value}>
        <p>App Component</p>
        <A />
      </MyContext.Provider>
    </div>
  );
}

=> MyContext.Provider는 React의 전역 데이터 전달자

=> value로 전달한 데이터를 내부의 모든 하위 컴포넌트(children)에게 자동으로 전달

 

 

 

 

3) 전달된 데이터 children에서 사용하기

=> useContext()의 아규먼트로 가져올 컨텍스트를 넣어줌

(이때 useContext()의 리턴값 = Provider에서 value 속성으로 넘겨준 값)

// App

function C() {
  const value = useContext(MyContext);
  return (
    <div>
      <p>C Component</p>
      <p>value: {value} </p>
    </div>
  );
}

 

 

---