[React] 전역 상태 관리 - Context Api

정세은·2022년 12월 6일

react

목록 보기

6/8

✔️ 개요

리액트에서 component가 데이터를 다루는 방법은 props, state, 그리고 context가 있다.
이번 포스팅에서는 context에 대하여 알아보려고 한다.

리액트에서는 props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해주게 된다.

위의 그림을 보자.
B컴포넌트에서 C컴포넌트에게 데이터를 전달해주고 싶으면 props를 사용해서 전달해주면 된다.

만약, A컴포넌트에 있는 데이터를 D컴포넌트에게 전달해주고 싶다면?
A->B, B->C, C->D 이렇게 넘겨줘도 되지만 매우 번거롭고, B와 C컴포넌트에서는 데이터를 사용하지 않는다면 이 과정 또한 비효율적일 것이다.
이럴 때, 우리는 context를 통해서 하위 컴포넌트들에게 값을 전달해줄 수 있다.

✔️ Context Api란?

리액트에 내장된 기능으로, props를 사용하지 않아도 특정 데이터가 필요한 컴포넌트끼리 데이터를 쉽게 공유할 수 있다.
conttext는 전역적인 데이터를 다룰 때 사용한다.
context api를 활용하면 A컴포넌트의 하위 컴포넌트들에게는 A Context에 직접 접근할 수 있는 권한이 주어지게 된다.

✔️ 어떤 경우에 필요할까?

로그인한 유저 정보를 앱 전체에서 가지고 있어야 하는 경우
테마 모드(light, dark)
언어 선택
위와 같이 어떠한 컴포넌트에서도 접근 가능한 상태여야 한다.

✔️ Context Api 예시

😀 context 생성하기

// User.js

import React, { createContext } from 'react';

export const UserContext = createContext();

1️⃣ 먼저, 넘겨주고 싶은 값이 있는 파일에 작성한다.
2️⃣ 새로운 Context를 만들 때는 createContext함수를 사용한다.
3️⃣ 추가한 createContext를 사용하여 Context를 생성한다.

// User.js

import { createContext, useState } from "react";

export const UserContext = createContext();

export default function UserStore(props) {
    const [job, setJob] = useState("FE-developer");

    const user = {
        name: "seeun",
        job,
        changeJob: (updatedJob) => setJob(updatedJob),
    };

    return <UserContext.Provider value={user}>{props.children}</UserContext.Provider>
}

위와 같이 컴포넌트에 provider로 감싸주면, 그 하위에 있는 모든 컴포넌트들은 이 context에 저장되어 있는 전역 데이터에 접근할 수 있다.

😀 context 저장하기

// App.js

import { BrowserRouter, Routes, Route } from "react-router-dom";
import MainPage from "./components/MainPage";
import TechPage from "./components/TechPage";
import BlogPage from "./components/BlogPage";
import JavascriptPage from "./components/JavascriptPage";
import ReactPage from "./components/ReactPage";
import ReactDocPage from "./components/ReactDocPage";
import UserStore from "./components/User";

function App() {

  return (
      <UserStore>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<MainPage />} />
            <Route path="tech" element={<TechPage />}>
              <Route path="javascript" element={<JavascriptPage />} />
              <Route path="react" element={<ReactPage />} />
              <Route path="react/:docId" element={<ReactDocPage />} />
            </Route>
            <Route path="blog" element={<BlogPage />} />
          </Routes>
        </BrowserRouter>
      </UserStore>
  );
}

export default App;

<UserStore > 하위에 감싸져 있는 모든 컴포넌트들에서 store에 접근할 수 있는 상태가 되었다.

😀 context 접근하기

// BlogPage.js

import React, { useContext } from "react";
import { UserContext } from "../store/user";

export default function BlogPage() {
		// UserContext에 있는 useContext를 가지고 옴.
   const value = useContext(UserContext);
   console.log(value);
 
   return (
       <div>
           <h1>Blog Page</h1>
       </div>
   );
}