Theme Toggle - React Coding Interview Question
- React Context API를 활용하여 컴포넌트 트리의 깊이에 상관없이 테마(라이트/다크 모드)를 전환하는 기능을 구현하는 것이 핵심 과제입니다. 💡
prop drilling 없이 모든 하위 컴포넌트에서 테마 상태에 접근하고 변경할 수 있도록 React Context만 사용해야 합니다. 🚫
useState 훅을 사용하여 현재 테마 상태(light 또는 dark)를 관리하며, 초기값은 light로 설정합니다. 🌓
- 테마 전환 로직은
setTheme 콜백 함수 내에서 현재 테마를 확인하여 light면 dark로, dark면 light로 변경하는 삼항 연산자를 사용합니다. 🔄
ThemeProvider에 전달되는 value 객체({ theme, toggleTheme })는 useMemo 훅으로 메모이제이션하여 theme 상태가 변경될 때만 새로운 객체가 생성되도록 성능을 최적화합니다. 🚀
useContext 훅을 사용하여 app.js, ToggleSwitch, ThemeBox 등 필요한 모든 컴포넌트에서 ThemeContext로부터 theme와 toggleTheme 함수를 구조 분해 할당하여 사용합니다. 🔗
- 이 문제는
Context API와 전역 상태 관리의 기본 원리를 이해하고 적용할 수 있는지 평가하는 React 기술 면접의 고전적인 질문입니다. 🎓