Context api

 

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

 

 

 

React 공식 문서에서 제공하는 context의 정의이다!

 

전역적으로 사용하기 위해 사용한다

 

우선 파일 구조로 보자면 아래와 같다

 

ㄴ src
   ㄴcomponenets
      ㄴAbout.js
      ㄴProfile.js
   ㄴstore
     ㄴUsers.js
App.js

 

store

  ㄴ Users.js

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

export const Usercontext = createContext(); //createContext 생성 

const UsersStore = (props) => {
  const users = {							//users 객체 생성
    name: "ryu",
    age: "77",
  };
  return (
    <Usercontext.Provider value={users}> {props.children}</Usercontext.Provider>
    // Usercontext.Provider로 감싸며 props 자식으로 값 내려줌
  );
};

export default UsersStore;

 

App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import About from "./components/About";
import Profile from "./components/Profile";
import UsersStore from "./store/Users";			//생성한 UsersStore import

const App = () => {
  return (
    <UsersStore>				// UsersStore로 사용할 위치 감싸준다
      <Router>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/profile">
            <Profile />
          </Route>
        </Switch>
      </Router>
    </UsersStore>
  );
};

export default App;

 

 

componenets
 ㄴAbout.js

import React, { useContext } from "react";
import { Usercontext } from "../store/Users";		//Usercontext import

const About = () => {
  const mycontext = useContext(Usercontext);		//mycontext 선언
  return <div> {mycontext.name}</div>;				//mycontext 객체 값 가져오기
};

export default About;