React context lab

인증과 테마를 하나의 전역 상태로 운용하기

이 실습은 로그인 상태, 사용자 정보, 테마 값을 한 Provider 안에 모으고 컴포넌트는 dispatch로 변경을 요청하는 구조를 익히는 데 초점을 둡니다.

전역으로 둘 상태

isLoggedIn

auth

Header, DashboardPage, UserProfile이 같은 로그인 여부를 읽습니다.

user

profile

로그인 성공 후 이름과 이메일을 저장하고 로그아웃 때 비웁니다.

theme

ui

light와 dark 값을 기준으로 body 클래스와 CSS 변수를 바꿉니다.

구현 결정 순서

1

상태 경계

여러 화면이 함께 쓰는 값만 Context로 올립니다.

2

변경 규칙

LOGIN, LOGOUT, TOGGLE_THEME를 reducer 안에 모읍니다.

3

공급 위치

AppProvider가 Router와 화면 전체를 감싸도록 둡니다.

4

소비 지점

Header와 보호 페이지는 state를 읽고 dispatch만 호출합니다.