[React] useContext hook

함수형 프로젝트를 진행하는데, 전역으로 관리할 state가 많지 않아서 useContext를 사용한다.
( 현재까지는 user 정보만 가지고 다니면 됨 )

• 폴더구조
  

• src/hooks/TestContext.js

  • useContext hook을 사용하여 컴포넌트 생성

import { createContext } from "react";


export const TestContext = createContext(null);

• src/App.js
  • App 단에 전역으로 전달

import React, { useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import routes from "./routes";

// test useContext
import { TestContext } from "./hooks/TestContext";

function App() {

  const [user, setUser] = useState({
    email: 'donnie.lee@email.kr',
    name : 'donnie',
    other : 'female'
  })
  return (
    <>
    <TestContext.Provider value={user}>
      <BrowserRouter>
        <Routes>
          {routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              name={route.name}
              element={<route.element />}
            />
          ))}
        </Routes>
      </BrowserRouter>
      </TestContext.Provider>
    </>
  );
}

export default App;

• src/views/Dashboard.js
  • 실제 전역으로 관리되는 state 값 사용하는 컴포넌트

import React, { useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import routes from "./routes";

// test useContext
import { TestContext } from "./hooks/TestContext";

function App() {

  const [user, setUser] = useState({
    email: 'donnie.lee@email.kr',
    name : 'donnie',
    other : 'female'
  })
  return (
    <>
    <TestContext.Provider value={user}>
      <BrowserRouter>
        <Routes>
          {routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              name={route.name}
              element={<route.element />}
            />
          ))}
        </Routes>
      </BrowserRouter>
      </TestContext.Provider>
    </>
  );
}

export default App;

• Dashboard 화면