Context API 사용방법

Context API란?

앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터(state)를 쉽게 공유할 수 있게 해 줍니다.

따라서 앱의 모든 컴포넌트에서 사용할 수 있는데  데이터(state)를 전달할 때 유용합니다.

 

Context API는 주로 어디에 이용해야 할까요?

리액트는 부모컴포넌트에서 자식컴포넌트에게 props를 통해 데이터를 전달합니다. 하지만 바로 아래 컴포넌트가 아니라 중간의 여러 컴포넌트를 거쳐야 하거나 앱의 여러 컴포넌트에서 동일한 데이터를 필요로 하는 경우에는 props drilling으로 계속 props로 넘겨줘야해서 불편합니다. 이럴 경우 Context API를 이용하여 중간 컴포넌트를 뛰어넘고 바로 대상 컴포넌트로 데이터를 전달할 수 있게 됩니다.

Context API 사용 방법

1. createContext 메서드를 사용하여 context를 생성한다.

2. 생성한 context를 대상 컴포넌트에 값을 내려주기 위해서 provider로 대상 컴포넌트를 감싼다.

3. provider의 프로퍼티인 value에 전달할 데이터를 넣는다.

4. provider의 value에 담은 데이터를 전달할 때는, 2가지 방식으로 전달이 가능하다.

 

import { createContext } from "react";

export const testContext = createContext("데이터의 초기값");

function App() {
  return (
    <>
      <testContext.provider value={"전달할 데이터"}>
        <h1>useContext</h1>
      </testContext.provider>
    </>
  );
}

export default App;

 

 

 

 

 

https://velog.io/@jiyaho/React-Context-API%EC%9D%98-%EA%B0%9C%EB%85%90-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95

위 블로그를 참고하여 작성하였습니다!