728x90
React Context를 이용해 전역 상태 관리를 해보겠다.
"use client";
import { selectType } from '@/app/(auth-required)/main/info/course-reviews/write-review/type';
import {
createContext,
ReactNode,
useState,
Dispatch,
SetStateAction,
} from "react";
type DataType = {
departments: selectType;
grade: selectType;
};
type ContextType = {
data: DataType;
setData: Dispatch<SetStateAction<DataType>>;
};
// Context 기본값을 명확하게 설정
export const ReviewContext = createContext<ContextType | null>(null);
type Props = { children: ReactNode };
export default function ReviewProvider({ children }: Props) {
const [data, setData] = useState<DataType>({
departments: { label: "컴공", value: "COMPUTER_SCI" },
grade: { label: "", value: "" },
});
return (
<ReviewContext.Provider value={{ data, setData }}>
{children}
</ReviewContext.Provider>
);
}
첫 번째로 create Context 함수를 이용해 Context 생성해 준다.
다음으로 Provider 내부에서 useState를 이용해 관리하고자 하는 상태를 선언해준다. 이렇게 만들어진 Provider를 통해 컴포넌트에 상태를 제공할 수 있다. 생성한 Provider는 Context를 사용할 컴포넌트들을 감싸고, value prop으로 전역 상태를 전달한다.
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html id="scrollbar-hidden" lang="ko" className="w-full h-full relative">
<head>
<title>인천대학교 정보대 SNS</title>
</head>
<ReviewProvider>
<body
id="scrollbar-hidden"
className="bg-white max-w-full min-h-full relative flex justify-center"
>
{" "}
{/* 바텀 네비게이션 높이만큼 패딩 추가 */}
<div className="bg-white w-full min-h-full max-w-[500px] relative">
{children}
</div>
</body>
</ReviewProvider>
</html>
);
}
최상위 컴포넌트에 Context Provider로 하위 컴포넌트를 감싸주며 Context를 사용할 수 있도록 작성해준다.
const DepartmentReview = () => {
const { departmentCode } = useParams();
const [lectureInfo, setLectureInfo] = useState<lectureInfoType | null>(null);
const [emotion, setEmotion] = useState<emotionType | null>(null);
const [reviewList, setReviewList] = useState<reviewType[]>([]);
const [refetch, setRefetch] = useState<boolean>(false);
const { data, setData } = useContext(ReviewContext);
...
useContext 훅을 사용해 Context의 상태 값을 가져올 수 있다. useContext 훅은 Provider에서 제공한 상태값에 접근할 수 있게 해준다.
728x90
'프로젝트' 카테고리의 다른 글
| [외주] React input 태그 입력시 focusOut되는 현상 (0) | 2024.12.14 |
|---|
