React Context API 소개

여러 구성 요소에서 올바른 방법으로 데이터를 공유하는 방법을 알아보세요.

React Context API는 React 구성 요소 전체에서 데이터를 공유하는 데 사용되는 상태 관리 도구입니다. Context API를 사용하여 기능 구성 요소에서 인증된 사용자를 추적하는 방법을 알아보세요.

React Context API란 무엇입니까?

React는 컴포넌트 기반 라이브러리입니다. 해당 애플리케이션은 함께 작동하는 다양한 구성 요소로 구성됩니다. 어떤 경우에는 애플리케이션이 이러한 구성 요소 간에 데이터를 공유해야 합니다.

예를 들어 로그인 구성 요소의 현재 사용자 이름을 애플리케이션의 다른 구성 요소와 공유할 수 있습니다. 컨텍스트를 사용하면 구성 요소 트리의 각 구성 요소를 통해 데이터를 전달할 필요가 없으므로 사용자 이름을 더 쉽게 공유할 수 있습니다.

언제 React Context API를 사용해야 합니까?

React 컨텍스트를 사용하기 전에 먼저 작업 중인 데이터 유형을 고려하세요. 컨텍스트는 정적 데이터에 더 적합합니다. 지속적으로 변경되는 데이터는 다시 렌더링되는 횟수가 너무 많아 결과적으로 성능이 저하됩니다. 또한 데이터는 전역적이거나 최소한 사용자 언어, 테마, 인증과 같은 데이터와 같은 많은 구성 요소에서 사용되어야 합니다.

컨텍스트를 사용하여 사용자 인증 상태 추적

애플리케이션이 인증을 사용하는 경우 해당 구성 요소 중 다수는 현재 사용자의 인증 상태를 알아야 합니다. 인증 상태를 각 구성 요소에 전달하는 것은 중복되고 소품 드릴링으로 이어지므로 컨텍스트를 사용하는 것이 좋은 옵션입니다.

createContext()

Context API를 시작하려면 먼저 이 구문을 사용하여 이를 생성해야 합니다.

const Context = React.createContext(defaultValue);

기본값은 불필요하며 일반적으로 테스트 목적으로 사용됩니다.

공급자

각 컨텍스트에는 랩하는 구성 요소에서 사용하는 값을 받는 공급자가 있습니다. 이를 통해 이러한 구성 요소가 컨텍스트 변경 사항을 구독할 수 있습니다.

<Context.Provider value={/* some value */}>

useContext

useContext()는 구성요소가 컨텍스트를 사용할 수 있도록 하는 React 후크입니다. 컨텍스트에서만 전달하면 됩니다.

const contextValue = useContext(Context)

이제 인증 상태를 추적하기 위해 인증 컨텍스트를 생성해 보겠습니다.

새 파일인 AuthContext.js를 만들고 다음을 추가하여 시작하세요.

import { createContext } from "react";
const AuthContext = createContext();
export default AuthContext;

다음으로 AuthProvider.js를 만들고 공급자 기능을 추가합니다.

import { useState, useEffect } from 'react';
import { getUser } from './auth.js'
import AuthContext from './AuthContext'
export const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    useEffect(() => {
 const currentUser = getUser()
 setUser(currentUser)
 }, []);
  
    return (
      <AuthContext.Provider value={{ user }}>{children}</AuthContext.Provider>
    );
  };

여기서는 가짜 getUser() 함수에서 현재 사용자를 검색하고 있습니다. 실제 애플리케이션에서는 이것이 백엔드 서비스가 됩니다.

사용자를 현재 상태로 저장하여 변경 사항을 추적한 다음 사용자를 value prop의 공급자에게 전달합니다.

AuthProvider.js는 컨텍스트에 대한 액세스 권한이 있는 하위 항목도 수신합니다.

다음 단계는 공급자로 래핑된 구성 요소가 컨텍스트에 액세스할 수 있도록 하는 사용자 지정 후크를 만드는 것입니다.

새 파일 useAuthContext.js를 만들고 다음을 추가합니다.

import AuthContext from "./AuthContext";
const useAuthContext.js = () => {
  const user = useContext(AuthContext);
  if (user === undefined) {
    throw new Error("useAuthContext can only be used inside AuthProvider");
  }
  return user;
};

이제 공급자 외부의 코드가 AuthContext를 호출하면 애플리케이션이 오류를 정상적으로 처리합니다.

마지막 단계는 AuthProvider.js의 컨텍스트를 사용하여 구성요소를 래핑하는 것입니다.

import { AuthProvider } from "./AuthContext";
ReactDOM.render(
  <React.StrictMode>
 <AuthProvider>
 <App />
 </AuthProvider>
  </React.StrictMode>,
  rootElement
);

다음은 인증되지 않은 사용자로부터 페이지를 보호하기 위해 컨텍스트를 사용하는 방법의 예입니다.

import useAuthContext from "./useAuthContext";
import { Navigate } from "react-router-dom";
const Profile = () => {
  const { user } = useAuthContext();
  if (!user) {
    return <Navigate replace to="/login" />;
  }
  return (
    <>
      <h1>Profile</h1>
    </>
  );
};

이 구성 요소는 사용자의 인증 상태에 따라 프로필 페이지를 조건부로 렌더링합니다. 사용자가 존재하는지 확인하고 존재하지 않으면 로그인 페이지로 리디렉션합니다. 그렇지 않으면 프로필 페이지를 렌더링합니다.

React Context API를 사용하지 말아야 할 경우

이 기사에서는 컨텍스트를 사용하여 구성 요소 전체에서 인증된 사용자를 추적하는 방법을 배웠습니다. 모든 데이터 공유 사용 사례에 Context를 사용하고 싶을 수도 있지만, 코드 유지 관리 및 성능이 저하되므로 사용해서는 안 됩니다. 컨텍스트 값이 변경될 때마다 상태를 다시 렌더링하는 각 구성 요소가 변경됩니다. 데이터가 몇몇 구성 요소에서만 사용되는 경우 props를 선택하세요.