Context API React

React Component Tree

리액트는 데이터를 위에서 아래로 전달한다

1번 컴포넌트에서 2,3 번으로 state 를 전달할 때는 props 를 사용하면 된다
1번에서 4번으로 보낼 때도 문제 되지 않는다

문제점

4번 컴포넌트에서 7번으로 보낼 때는? (4 => 2 => 1 => 3 => 7 을 순차적으로 거쳐야 하면서 Prop-drilling 이라는 현상이 나옴)

6번 컴포넌트에서 7번과 state 를 공유하고 싶을 때는?

 

Context API

Prop 를 이용해서 전달하기 어려울 때 해결방법으로 나온게 Context API 이다.

Provider 를 사용하여 Prop 사용없이 값을 전달 할 수 있다

Provider 를 사용할 때

 

Context API 사용방법

1. createContext 를 사용해서 context 를 생성한다
2. 생성한 context 를 이용하여 React 컴포넌트를 Wrapping 한다
3. 생성된 context 안의 컴포넌트에서 useContext 구문으로 사용한다

 

npx create-react-app context-api

 

createContext 를 사용해서 context 를 생성한다

src > components > Dinolist.js 생성

import React from "react";

const DinoList = () => {
  return <div></div>;
};

export default DinoList;

src > contexts > DinoContext.js 생성

import React, { createContext, useState } from "react";

export const DinoContext = createContext();

const DinoContextProvider = (props) => {
  const [dinos, dinoList] = useState([
    { name: "T-Rex", id: 1 },
    { name: "Velociraptor", id: 2 },
    { name: "Stegosaurus", id: 3 },
    { name: "Triceratops", id: 4 },
    { name: "Brachiosaurus", id: 5 },
  ]);

  return (
    <DinoContext.Provider value={{ dinos }}>
      {props.children}
    </DinoContext.Provider>
  );
};

export default DinoContextProvider;

 

생성한 context 를 이용하여 React 컴포넌트를 Wrapping 한다

app.js 에서 DinoContextProvider 로 DinoList 컴포넌트를 Wrap

import logo from './logo.svg';
import './App.css';
import DinoList from "./components/DinoList";
import DinoContextProvider from "./contexts/DinoContext";

function App() {
  return (
    <div className="App">
      <DinoContextProvider>
        <DinoList />
      </DinoContextProvider>
    </div>
  );
}

export default App;

 

생성된 context 안의 컴포넌트에서 useContext 구문으로 사용한다

Dinolist.js 에서 useContext 를 추가한다

import React, { useContext } from "react";
import { DinoContext } from "../contexts/DinoContext";

export default function DinoList() {
  const { dinos } = useContext(DinoContext);

  return dinos.length ? (
    <div>
      <h2>Dinosaurs</h2>
      <ul>
        {dinos.map((dino) => (
          <li key={dino.id}>{dino.name}</li>
        ))}
      </ul>
    </div>
  ) : (
    <div>
      <h2>No dinos found</h2>
    </div>
  );
}

결과화면

Context API 를 활용해서 데이터를 전달할 수 있다