글로벌하게 상태값을 관리해주는 Context API !!

hoonie·2020년 11월 27일
3
post-thumbnail

안녕하세요. 이번 시간에는 글로벌하게 state값을 관리할 수 있는 유용한 기능을 알아보겠습니다. 일반적으로 상태값을 관리하는 useState는 그 해당 컴포넌트 내에서만 사용가능하던가 아니면 props로 전송을 하면서 이용했어야했습니다.

하지만 컴포넌트가 다양해지면 다양해질수록 props로 전송하는것이 매우 까다로워지는데, 이러한 단점을 보완하기 위해 글로벌하게 상태값을 관리할 수 있는 기능이 있습니다.

대표적으로, Context API와 리덕스가 있는데 이번 글에서는 Context API를 알아보겠습니다!

Context API란?

보통 일반적으로 상태값은 다른 컴포넌트에 넘길때 그 컴포넌트에 변수명과 상태값을 대입하여 넘겨서 사용합니다.
하지만 Context API를 생성하여 설정시 이 Context로 감싸져있는 모든 컴포넌트에서 동일하게 그 상태값을 빼서 사용할 수 있습니다.
예를들어, 상태값을 저장할 하나의 박스를 만들고 거기에다가 상태값들을 저장 합니다. 그리고 다른 컴포넌트에서 개발을 하다가 이 상태값이 필요하게 되면 props로 전송할 필요 없이 상태값을 담아놨던 Context 박스를 만들고 필요할때 꺼내 사용 하는 것입니다.

사용 방법

사용방법은 여러가지가 있는데, 저는 Context API 를 설정하기 위한 컴포넌트를 하나 생성해서 사용합니다.

import React, { createContext, useState, useContext } from 'react'

//createContext를 사용하여 상태값을 담을 박스 생성 -> 그 박스의 이름을 지정(Context)
const Context = createContext()

//상위 컴포넌트에 UserContextProvider 컴포넌트를 감싸기 위한 설정
export function UserContextProvider({ children }) {
  //글로벌하게 관리하고 싶은 상태값 지정
  const [user, setUser] = useState(null)
  return (
    //변수명.Provider 문법으로 그 범위 안에있는 컴포넌트한테 값을 공유할 수 있음
    //value값에 전송할 props 넣기 속성명(value)는 임의변경 불가
    <Context.Provider
      value={{
        user,
        setUser,
      }}
    >
      {children}
    </Context.Provider>
  )
}

//이걸 이용해서 value에 있는 값에 접근 할 수 있다.
//예를들어 const {user} = useUserContext(); 를 하면 user상태값을 빼올 수 있음
export function useUserContext() {
  return useContext(Context)
}

그리고 이렇게 만든 컴포넌트를 import 해서 모든 곳에서 나는 이 박스를 사용하겠다 라고 지정을 해줘야합니다!


import React from "react";
import SearchPage from "./searchPgae";
import { UserProviderContext } from "./user-context";
import LoginForm from "./loginForm";
import { Route, Link, Switch } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <UserProviderContext>
        <Switch>
          <Route path="/search" component={SearchPage}></Route>
          <Route path="/login" component={LoginForm}></Route>
        </Switch>
      </UserProviderContext>
    </div>
  );
}

export default App;

이렇게 하면 모든 컴포넌트에 UserProviderContext 로 감쌌기때문에
마음껏 useUserContext를 이용하여 Context API를 사용 할 수 있습니다.

그래서 원하시는 컴포넌트에서 예를들어 setUser 를 사용하고 싶으시면

//context.js는 context API를 생성했던 컴포넌트 공간 입니다.
import {useUserContext} from "./context.js";

//useUserContext 임포트 후 원하는 상태값 불러오기
const { setUser } = useUserContext();

이런식으로 사용하시면 됩니다!

참고자료
https://reactjs.org/docs/context.html

0개의 댓글