[React] 전역 상태 관리

youngseo·2022년 7월 31일

REACT

목록 보기

29/52

전역 상태 관리

전역상태를 관리한다는 말은 어플리케이션에 어떤 컴포넌트에서도 이 전역적으로 관리되고 있는 상태 값에 접근해 사용할 수 있다는 것을 의미합니다.

대표적으로 로그인한 유저 정보와 Theme style이 있습니다.

context

만약 App에서 D로 데이터를 전달하기 위해서는 A, B, C에서는 사용하지 않는 데이터를 props를 받아야합니다. 이런것을 비효율적인 방법을 개선하는 방법으로는 context가 있습니다. 특정 컴포넌트에서 context를 만들면 그 하위의 컴포넌트에서는 직접 그 context에 접근할 수 있게 됩니다.

실습

app.js에서 context를 만드는 실습을 진행해보겠습니다. 보통 context의 경우 src폴더 내부에 store이라는 폴더를 만들어 사용을 합니다.

1. 전역관리 컴포넌트 생성

user.js

import React, {createContext} from 'react' //1. createContext를 가져옵니다.

export const UserContext = createContext() //2 UserContext라는 이름으로 호출을 해 내보내기 해줍니다.

function userStore(props) { //3.userStore이라는 이름으로 만들어줍니다.
  const user = {
    name: '0seo',
    job: 'FE-developer'
  }
  return (
    <UserContext.Provider value={user}> //4.⭐앞에서 만든 UserContext에 `Provider`을 호출해줍니다.  //6. ⭐value에 정의한 내용만 전역적으로 상태를 공유할 수 있습니다.
      {props.children} //⭐5. props에 정의한 자식 컴포넌트에서 접근이 가능합니다.
    </UserContext.Provider>;
  )
}

export default userStore;

아래와 같이 전역적으로 사용할 정보에 함수를 넣을 수도 있습니다.

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

export const UserContext = createContext();

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

  const user = {
    name: "0seo",
    job,
    changejob: (upatedJob) => setJob(upatedJob),
  };
  return (
    <UserContext.Provider value={user}>{props.children}</UserContext.Provider>
  );
}

2. 등록

이제 props.children에 해당하는 컴포넌트를 넣어줘야합니다.

App.js

import UserStore from "./store/user"; //UserStore을 불러와

function App() {
  return (
    <UserStore> //USerStore가 최상위 태그가 될 수 있도록 감싸줍니다.
      <BrowserRouter>
        <Routes>
          <Route path={"/"} element={<MainPage />}></Route>
          <Route path={"tech"} element={<TechPage />}>
            <Route path="javascript" element={<Javascript />} />
            <Route path="react" element={<ReactPage />}></Route>
            <Route path="react/:docId" element={<ReactDocPage />} />
          </Route>
          <Route path={"blog"} element={<BlogPage />}></Route>
        </Routes>
      </BrowserRouter>
    </UserStore>
  );
}

export default App;

userStore을 불러와 최상위 컴포넌트로 감싸줍니다.

3. 사용

user.js에서 createContecxt를 사용했지만 사용하는 부분에서는 userContext를 사용합니다.
user.js에 정의한 UserContext를 가져옵니다.

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

export default function BlogPage() {
  const value = useContext(UserContext);//3. 
  console.log(value);
  return (
    <div>
      <h1>BlogPage</h1>
    </div>
  );
}