15. Context(ContextAPI)

props와 context props로 전달 props로 자손에게 데이터 전달 contextAPI context 사용해보기 props로 자손에게 데이터 전달

props와 context

이번 시간에는 useContext에 대해서 알아봅시다!

보통 컴포넌트에게 데이터를 넘겨줄 때 props를 통하여 넘겨줍니다. 위에 그림을 살펴볼까요?

부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달해주려면 props로 값을 넘겨주고 자식 컴포넌트는 props를 통해 받은 데이터를 사용합니다.

부모 컴포넌트가 자손 컴포넌트에게 데이터를 전달해줄 때는 어떻게 전달할까요? 자식에게 전달해준 방법 그대로, 부모 컴포넌트가 자식 컴포넌트에게 props로 데이터를 넘겨주고, 자식 컴포넌트는 자신의 자식 컴포넌트에게 데이터를 넘겨줍니다.

자식 컴포넌트가 자식 컴포넌트의 자식 컴포넌트에게 넘겨주려면 어떻게 해야 할까요? 똑같이 컴포넌트들에게 props를 통해 데이터를 전달해줍니다.

부모 컴포넌트는 자식에게 props를 통해 데이터를 넘겨주고, 자식은 또 자식에게 props를 통해 데이터를 넘겨주게 되죠!

작은 프로젝트에서는 props 전달은 문제가 없습니다. 하지만 프로젝트가 커져서 부모가 n번째 자손에게 넘겨줘야 한다면 n-1개의 자손에게 props를 사용하여 전달하게 됩니다. 단지 전달을 위해서 말이죠! 계속해서 불필요한 props를 사용하게 되고 의미 없는 값들이 컴포넌트들을 스쳐가게 됩니다.

이때 사용하는 것이 바로 context입니다!

context는 props를 사용하지 않고 데이터를 전달하도록 해줍니다. props를 사용하지 않고 n번째 자손에게 직접 데이터를 건내줍니다. n-1개의 자식을 통과하여 n번째 자식에게 데이터를 전달하지 않아도 부모에서 바로 n번째 자식에게 값을 전달할 수 있게 됩니다.

props에 대한 전역 데이터 저장소라고 생각하시면 됩니다.

props로 전달


import React from "react";

const App = () => {
  return (
    <HelloLicat value={{ name: "gary", id: "garyIsFree" }} />
  );
};

const HelloLicat = (props) => {
  const id = props.value.id;
  const name = props.value.name;
  return (
    <div>
      <h2>{id}</h2>
      <strong>{name}</strong>
    </div>
  );
};

export default App;

src / App.js

props로 자손에게 데이터 전달


import React from "react";

const App = () => {
  return (
    <HelloLicat value={{ name: "gary", id: "garyIsFree" }} />
  );
};

const HelloLicat = (props) => {
  const id = props.value.id;
  const name = props.value.name;
  return (
    <div>
      <h2>{id}</h2>
      <strong>{name}</strong>
      <HelloLicatTwo value={{ id, name}}/>
    </div>
  );
};

const HelloLicatTwo = (props) => {
  const id = props.value.id;
  const name = props.value.name;
  return (
    <div>
      <h2>Two : {id}</h2>
      <strong>Two : {name}</strong>
    </div>
  );
};

export default App;

src / App.js

contextAPI

context 사용해보기

1) Context 생성

createContext로 context를 생성합니다. 값을 전달해줄 컴포넌트에 Context.Consumer 형식으로 감싸주고 UserInfo 안에 있는 Consumer라는 컴포넌트를 통해 value 값을 가져옵니다.


import React, { createContext } from "react";

const UserInfo = createContext({ name: "gary", id: "garyIsFree" });

const App = () => {
  return (
    <HelloLicat/>
  );
};

const HelloLicat = () => {
  return (
    <UserInfo.Consumer>
      {(value) => (
        <div>
          <h2>{value.name}</h2>
          <strong>{value.id}</strong>
        </div>
      )}
    </UserInfo.Consumer>
  );
};

export default App;

src / App.js

props로 자손에게 데이터 전달


import React, { createContext } from "react";

const UserInfo = createContext({ name: "gary", id: "garyIsFree" });

const App = () => {
  return (
    <HelloLicat/>
  );
};

const HelloLicat = () => {
  return (
    <UserInfo.Consumer>
      {(value) => (
        <div>
          <h2>{value.name}</h2>
          <strong>{value.id}</strong>
          <HelloLicatTwo/>
        </div>
      )}
    </UserInfo.Consumer>
  );
};

const HelloLicatTwo = () => {
  return (
    <UserInfo.Consumer>
      {(value) => (
        <div>
          <h2>{value.name}</h2>
          <strong>{value.id}</strong>
        </div>
      )}
    </UserInfo.Consumer>
  );
};

export default App;

src / App.js

2) Context.Provider로 값 변경하기


import React, { createContext } from "react";

const UserInfo = createContext({ name: "gary", id: "garyIsFree" });

const App = () => {
  return (
    <UserInfo.Provider value={{ name: "Licat", id: "ImLion" }}>
      <HelloLicat />
    </UserInfo.Provider>
  );
};

const HelloLicat = () => {
  return (
    <UserInfo.Consumer>
      {(value) => (
        <div>
          <h2>{value.name}</h2>
          <strong>{value.id}</strong>
          <HelloLicatTwo/>
        </div>
      )}
    </UserInfo.Consumer>
  );
};

const HelloLicatTwo = () => {
  return (
    <UserInfo.Consumer>
      {(value) => (
        <div>
          <h2>{value.name}</h2>
          <strong>{value.id}</strong>
        </div>
      )}
    </UserInfo.Consumer>
  );
};

export default App;

src / App.js

HelloLicat에 UserInfoContext.Provider로 감싸서 값을 전달하면 consumer로 전달되는 value 값이 바뀝니다.

다른 값들도 넣어보세요!


<UserInfo.Provider value={{ name: "ali", id: "nodeMaster" }}>

이때, Provider로 값을 전달하지 않으면 에러가 발생하니 꼭 value를 넣어야 합니다.


const App = () => {
  return (
    <UserInfoContext.Provider>
      <HelloLicat />
    </UserInfoContext.Provider>
  );
};

// ERROR 발생

src / App.js