Global State 전역상태란?
컴포넌트들이 공유해서 사용 할 수 있는 데이터
로그인정보, 실행환경정보, 테마등…
전역상태구현방법
– Context API: 오직 전역 상태만 제공
– Redux: 전역 상태 및상태와관련된다양한기능제공
context는
전역상태를 가지고 있는 객체이다.
Context.Provider
react 에서 제공하는 context가 있다
컨텍스트 객체를 각 컴포넌트에 전달하는 context.provider 가 있다
useContext
훅으로 각 컨텍스트를 받아준다.
전역이든 뭐든 상태가 들어가면 클라이언트 컴포넌트로 만들어야 한다.
ui가 있는 컴포넌트가 아닌 colorContext(전역상태)를 가지고있는 객체를 하나 만들어 보자
'use client';
import { createContext, useState } from "react";
// 색상 관련 전역 상태를 관리하는 Context 생성
export const ColorContext = createContext();
// ColorContext를 제공하는 Provider 컴포넌트
// 앱 전체에서 색상 정보를 공유하기 위해 사용
export function ColorContextProvider({ children }) {
// 색상 상태 관리
// 기본값은 빈 문자열 또는 원하는 초기 색상으로 설정
const [color, setColor] = useState("black");
// Context를 통해 제공할 전역 상태 객체
const value = {
color,
// 현재 색상 값
setColor,
};
// 색상을 업데이트하는 함수
// Provider를 통해 하위 컴포넌트에 value 전달
return (
<ColorContext.Provider value={value}>
{children}
</ColorContext.Provider>
);
}
export const ColorContext = createContext();
export된 상태를
각각의 하위 컴포넌트에서 useContext로 받아서 사용한다.
<ColorContextProvider>
<XXXXXXX>
</ColorContextProvider>
프로바이더로 감싼 안에있는 객체가 컬러컨택스트프로바이더가 제공해주는 컨택스트만 사용할수있다.
<AppHeader>는 총 세개의 전역 상태를 쓸 수 있다.
프로젝트 구조에서 라우터와 관계 없는 것들
즉 페이지와 관련 없는 요소들은 app밑에 둘 필요가 없다.
value를 props로 넘긴다.
layout.js에서
contextProvider로 감싸준다.
그러면 하위의 컴포넌트들이 전역으로 관리하는 값들에 접근할수있다.
절대경로
../이런 상대경로 사용하지 마세요
@/
로 절대경로 사용하기
루트는 프로젝트 폴더부터 시작이다.
context를 임포트 해주고 useContext로 관리한다.
div로 배열만큼 만들어준다.
handleClick(color)
파라미터 필요한경우 이런식으로 보내줌
전역 상태 가져옴
colorContext가 변경이 될때마다 리랜더링이 일어남
AuthContext.js
"use client"
import { createContext, useState, useEffect, startTransition } from "react";
import axiosConfig from "@/apis/axiosConfig";
// 인증 관련 전역 상태를 관리하는 Context 생성
export const AuthContext = createContext();
// AuthContext를 제공하는 Provider 컴포넌트
// 앱 전체에서 사용자 인증 정보를 공유하기 위해 최상위에서 감싸줌
export function AuthContextProvider({ children }) {
// 사용자 정보 상태 관리
const [user, setUser] = useState("");
const [accessToken, setAccessToken] = useState("");
//브라우저 갱신시 로그인 또는 로그인폼이 잠깐 나왔다가 사라지는 현상 방지용
const [isLoading, setIsLoading] = useState(true);
//로컬 스토리지에서 읽기
useEffect(() => {
// startTransition으로 감싸서 React 19의 경고 방지
// React 19는 useEffect 내부의 동기적 setState를 경고함 (실행에는 영향 없음)
// startTransition으로 감싸면 "transition 업데이트"로 마킹되어 경고 예외 처리됨
// 감싼 코드는 즉시 실행되며, 렌더링 우선순위만 낮아짐
startTransition(() => {
setUser(localStorage.getItem("user") || "");
setAccessToken(localStorage.getItem("accessToken") || "");
setIsLoading(false);
});
}, []);
//로그인, 로그아웃시 런타임시 상태가 변경되면 로컬 스토리지 변경 및 Axios 설정 변경
useEffect(() => {
if(user !== "") {
localStorage.setItem("user", user);
localStorage.setItem("accessToken", accessToken);
axiosConfig.addAuthHeader(accessToken);
} else {
localStorage.removeItem("user");
localStorage.removeItem("accessToken");
axiosConfig.removeAuthHeader();
}
}, [user, accessToken]);
// Context를 통해 제공할 전역 상태 객체
const value = {
user,
accessToken,
setUser,
setAccessToken,
};
// 로딩 중일 때는 아무것도 렌더링하지 않음
// 브라우저 갱신시 로그인 또는 로그인폼이 잠깐 나왔다가 사라지는 현상 방지
if (isLoading) {
return null;
}
return (
<AuthContext.Provider value={value}>
{children}
</AuthContext.Provider>
);
}
어플리케이션을 다시 시작하면 전역 상태가 없는 상태가 된다.
로컬스토리지에 있는 내용을 가져와서 전역상태로 저장을 한다.
로컬스토리지에서 가져오는 그 시간동안은 전역 로그인 여부가 false이니까 그 시간동안에는 로그인이 안된것이잖아...
그래서 useState로 상태 관리할때 디폴트를 true로 준다.
여기 칠드런은 뭘까??
레이아웃에서 AuthContextProvider로 감싼 안에 컴포넌트들이 칠드런이다.
isLoading을 전역상태로 관리해서 로딩 중일때는 안나오고 로딩이 다 되면 UI를 보여준다.
useEffect(()=>{
}, [ ])
빈배열이면 마운트, 언마운트 될때 리랜더링 되고 업데이트 될때는 아니다
처음에 한번만 로컬스토리지에서 로그인 여부를 가져오면 된다.
그래서 useEffect에 빈배열 넣어준다.
댓글