24. Context API (전역 데이터 관리)
1. Context API란?
Context API는 여러 컴포넌트에서 공통으로 사용하는 데이터를 전역(Global)으로 관리하는 기능입니다.
예를 들어
로그인 정보
다크모드
사용자 정보
언어 설정
장바구니
처럼 여러 페이지에서 사용하는 데이터를 관리할 때 사용합니다.
2. Props의 문제점
예를 들어 로그인 정보를 Footer까지 전달해야 한다고 가정해 봅니다.
App
↓
Header
↓
Layout
↓
Main
↓
Footer
Footer에서 로그인 정보를 사용하려면
App
↓
Header
↓
Layout
↓
Main
↓
Footer
모든 컴포넌트가 Props를 계속 전달해야 합니다.
이것을 Props Drilling이라고 합니다.
3. Context API의 해결 방법
Context를 사용하면
Context
↓
Header
↓
Footer
↓
Reservation
↓
Gallery
↓
Notice
필요한 컴포넌트가 직접 데이터를 가져올 수 있습니다.
4. Context 만들기
import {
createContext
}
from "react";
export const UserContext =
createContext();
5. Provider
App.jsx
<UserContext.Provider
value={{
user,
setUser
}}
>
<App/>
</UserContext.Provider>
Provider가 데이터를 제공합니다.
6. useContext
필요한 컴포넌트에서
import {
useContext
}
from "react";
사용
const {
user,
setUser
}
=
useContext(
UserContext
);
Props 없이 바로 데이터를 사용할 수 있습니다.
7. 로그인 예제
로그인 성공
setUser({
name:"홍길동",
grade:"VIP"
});
Header
안녕하세요
홍길동님
Footer
VIP 회원
Reservation
예약자
홍길동
모두 같은 데이터를 사용합니다.
8. 동부산CC 예제
Context
↓
회원정보
↓
Header
↓
Reservation
↓
MyPage
↓
Notice
↓
Footer
로그인 정보를
모든 페이지에서 사용할 수 있습니다.
9. 다크모드
const [theme,
setTheme]
=
useState("light");
Context
↓
모든 페이지
↓
다크모드 적용
10. 언어 설정
한국어
↓
Context
↓
Header
↓
Footer
↓
Reservation
한 번 변경하면
모든 페이지가 동시에 변경됩니다.
11. Context 구조
UserContext
↓
Provider
↓
Component
↓
useContext()
이 구조가 기본입니다.
12. React 실행 흐름
Provider
↓
Context 저장
↓
useContext
↓
Component
↓
화면 출력
13. Props와 Context 비교
Props Context
부모 → 자식 전달 어디서든 접근 가능
단계마다 전달 직접 사용
작은 프로젝트 큰 프로젝트
Props Drilling 발생 Props Drilling 해결
14. Context 사용 예
✔ 로그인 정보
✔ 회원 정보
✔ 다크모드
✔ 언어
✔ 장바구니
✔ 알림
✔ 사이트 설정
15. 동부산CC 프로젝트
UserContext
↓
회원정보
↓
Header
↓
Reservation
↓
MyPage
↓
Footer
로그인한 회원 이름이
모든 페이지에 자동으로 표시됩니다.
16. 여러 Context
실무에서는 여러 개를 사용합니다.
UserContext
ThemeContext
LanguageContext
ReservationContext
기능별로 나누어 관리합니다.
17. 폴더 구조
src
context
UserContext.jsx
ThemeContext.jsx
LanguageContext.jsx
컴포넌트와 분리하여 관리하면 유지보수가 쉬워집니다.
18. Context 사용 시 주의사항
✔ 전역으로 필요한 데이터만 저장
✔ 자주 변경되는 데이터는 신중하게 관리
✔ 모든 데이터를 Context에 넣지 않기
예를 들어
예약 입력폼의 임시 입력값처럼 특정 컴포넌트에서만 사용하는 데이터는 useState로 관리하는 것이 더 적합합니다.
19. 동부산CC에서 Context 활용
데이터 관리 방법
로그인 회원 UserContext
다크모드 ThemeContext
언어 LanguageContext
예약 상태 ReservationContext
현재 코스 CourseContext
20. 정리
Context API는 여러 컴포넌트에서 공통으로 사용하는 데이터를 전역으로 관리하는 기능입니다.
Props를 여러 단계에 걸쳐 전달하는 Props Drilling 문제를 해결할 수 있으며, Provider에서 데이터를 제공하고 useContext()를 통해 필요한 컴포넌트에서 직접 사용할 수 있습니다.
동부산CC 프로젝트에서는 로그인 정보, 회원 정보, 다크모드, 언어 설정, 예약 상태 등을 Context로 관리하면 코드가 훨씬 간결하고 유지보수가 쉬워집니다.
Context API는 React 중급 과정에서 가장 중요한 개념 중 하나이며, 이후 배우게 될 전역 상태 관리의 기초가 됩니다.
1. Context API란?
Context API는 여러 컴포넌트에서 공통으로 사용하는 데이터를 전역(Global)으로 관리하는 기능입니다.
예를 들어
로그인 정보
다크모드
사용자 정보
언어 설정
장바구니
처럼 여러 페이지에서 사용하는 데이터를 관리할 때 사용합니다.
2. Props의 문제점
예를 들어 로그인 정보를 Footer까지 전달해야 한다고 가정해 봅니다.
App
↓
Header
↓
Layout
↓
Main
↓
Footer
Footer에서 로그인 정보를 사용하려면
App
↓
Header
↓
Layout
↓
Main
↓
Footer
모든 컴포넌트가 Props를 계속 전달해야 합니다.
이것을 Props Drilling이라고 합니다.
3. Context API의 해결 방법
Context를 사용하면
Context
↓
Header
↓
Footer
↓
Reservation
↓
Gallery
↓
Notice
필요한 컴포넌트가 직접 데이터를 가져올 수 있습니다.
4. Context 만들기
import {
createContext
}
from "react";
export const UserContext =
createContext();
5. Provider
App.jsx
<UserContext.Provider
value={{
user,
setUser
}}
>
<App/>
</UserContext.Provider>
Provider가 데이터를 제공합니다.
6. useContext
필요한 컴포넌트에서
import {
useContext
}
from "react";
사용
const {
user,
setUser
}
=
useContext(
UserContext
);
Props 없이 바로 데이터를 사용할 수 있습니다.
7. 로그인 예제
로그인 성공
setUser({
name:"홍길동",
grade:"VIP"
});
Header
안녕하세요
홍길동님
Footer
VIP 회원
Reservation
예약자
홍길동
모두 같은 데이터를 사용합니다.
8. 동부산CC 예제
Context
↓
회원정보
↓
Header
↓
Reservation
↓
MyPage
↓
Notice
↓
Footer
로그인 정보를
모든 페이지에서 사용할 수 있습니다.
9. 다크모드
const [theme,
setTheme]
=
useState("light");
Context
↓
모든 페이지
↓
다크모드 적용
10. 언어 설정
한국어
↓
Context
↓
Header
↓
Footer
↓
Reservation
한 번 변경하면
모든 페이지가 동시에 변경됩니다.
11. Context 구조
UserContext
↓
Provider
↓
Component
↓
useContext()
이 구조가 기본입니다.
12. React 실행 흐름
Provider
↓
Context 저장
↓
useContext
↓
Component
↓
화면 출력
13. Props와 Context 비교
Props Context
부모 → 자식 전달 어디서든 접근 가능
단계마다 전달 직접 사용
작은 프로젝트 큰 프로젝트
Props Drilling 발생 Props Drilling 해결
14. Context 사용 예
✔ 로그인 정보
✔ 회원 정보
✔ 다크모드
✔ 언어
✔ 장바구니
✔ 알림
✔ 사이트 설정
15. 동부산CC 프로젝트
UserContext
↓
회원정보
↓
Header
↓
Reservation
↓
MyPage
↓
Footer
로그인한 회원 이름이
모든 페이지에 자동으로 표시됩니다.
16. 여러 Context
실무에서는 여러 개를 사용합니다.
UserContext
ThemeContext
LanguageContext
ReservationContext
기능별로 나누어 관리합니다.
17. 폴더 구조
src
context
UserContext.jsx
ThemeContext.jsx
LanguageContext.jsx
컴포넌트와 분리하여 관리하면 유지보수가 쉬워집니다.
18. Context 사용 시 주의사항
✔ 전역으로 필요한 데이터만 저장
✔ 자주 변경되는 데이터는 신중하게 관리
✔ 모든 데이터를 Context에 넣지 않기
예를 들어
예약 입력폼의 임시 입력값처럼 특정 컴포넌트에서만 사용하는 데이터는 useState로 관리하는 것이 더 적합합니다.
19. 동부산CC에서 Context 활용
데이터 관리 방법
로그인 회원 UserContext
다크모드 ThemeContext
언어 LanguageContext
예약 상태 ReservationContext
현재 코스 CourseContext
20. 정리
Context API는 여러 컴포넌트에서 공통으로 사용하는 데이터를 전역으로 관리하는 기능입니다.
Props를 여러 단계에 걸쳐 전달하는 Props Drilling 문제를 해결할 수 있으며, Provider에서 데이터를 제공하고 useContext()를 통해 필요한 컴포넌트에서 직접 사용할 수 있습니다.
동부산CC 프로젝트에서는 로그인 정보, 회원 정보, 다크모드, 언어 설정, 예약 상태 등을 Context로 관리하면 코드가 훨씬 간결하고 유지보수가 쉬워집니다.
Context API는 React 중급 과정에서 가장 중요한 개념 중 하나이며, 이후 배우게 될 전역 상태 관리의 기초가 됩니다.
#24. Context API (전역 데이터 관리)