안녕하세요. 이번 시간에는 글로벌하게 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();
이런식으로 사용하시면 됩니다!
