Context API

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 입니다.

로그인 정보, 애플리케이션의 환경설정 및 테마 설정 등의 정보가 해당 됩니다.

리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현되었습니다.

위의 그림의 경우 G컴포넌트의 전역 상태를 업데이트 시키고 F와 J에서 G의 변경된 상태를 참고해서 상태를 갱신하는 경우 상당히 복잡한 처리가 필요 합니다.

이런 경우 예전에는 리덕스나 MobX 같은 상태 관리 라이브러리를 사용하여 전역 상태 관리 작업을 편리하게 처리하기도 하는데 v16.3 업데이트 이후에는 Context API가 많이 개선되었기 때문에 별도의 라이브러리를 사용하지 않아도 전역 상태를 손쉽게 관리할 수 있습니다.

context/UserStore.js

• createContext함수를 사용하여 UserContext라는 새로운 Context 객체를 생성합니다.
• UserStore컴포넌트는 props.children을 포함하는 UserContext.Provider컴포넌트를 반환합니다.
• UserContext.Provider는 UserContext 객체를 이용해 valueprop을 전달합니다.

import { createContext, useState } from "react";
export const UserContext = createContext(null);

const UserStore = (props) => {
    const [userId, setUserId] = useState("");
    const [password, setPassword] = useState("");

    return(
        <UserContext.Provider value={{
            userId,
            setUserId,
            password,
            setPassword
        }}>
            {props.children}
        </UserContext.Provider>
    );
};
export default UserStore;

App.js 수정

<UserStore>컴포넌트는 앞서 설명한 것처럼 전역 상태를 관리하기 위한 UserStore컴포넌트입니다.

App컴포넌트는 UserStore를 먼저 렌더링하고, 그 안에 Router와 Routes를 중첩하여 페이지 컴포넌트를 렌더링하게 됩니다. 이를 통해 React Router와 전역 상태 관리를 함께 사용할 수 있습니다.

import './App.css';
import Login from './Login';
import Signup from './pages/Signup';
import Home from './pages/Home';
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import UserStore from "./context/UserStore";

function App() {
    return (
        <UserStore>
            <Router>
                <Routes>
                    <Route path="/" element={<Login />} />
                    <Route path="/Signup" element={<Signup />} />
                    <Route path="/Home" element={<Home />} />
                </Routes>
            </Router>
        </UserStore>
    );
}
export default App;

context에 값 저장 하기

React 컴포넌트에서 UserContext를 사용하여 전역 상태 변수인 username과 email을 업데이트 할 수 있습니다.

import {UserContext} from "../context/UserStore";
import React, {useState, useEffect, useContext} from 'react';

const context = useContext(UserContext);
const {setUserId, setPassword} = context;

setUserId(inputId);
setPassword(inputPw);

값 사용하기

import { UserContext } from "../context/UserStore";

const context = useContext(UserContext);
const { userId, password } = context;

<p>아이디 : {userId}</p>
<p>패스워드 : {password}</p>