프로젝트 의 React 스킬 트리

라이트 모드와 다크 모드 전환

초급

이 프로젝트에서는 사용자가 라이트 모드와 다크 모드 간을 전환할 수 있는 React 애플리케이션을 만드는 방법을 배웁니다. 이 프로젝트는 React Context API 와 useContext 훅을 사용하여 전역 테마 상태를 관리하는 방법을 보여줍니다.

reactjavascriptweb-development

💡 이 튜토리얼은 영어로 번역되었습니다. 원본을 보려면 영어로 전환

소개

이 프로젝트에서는 사용자가 라이트 모드와 다크 모드를 전환할 수 있는 React 애플리케이션을 만드는 방법을 배우게 됩니다. 이 프로젝트는 React Context API 와 useContext 훅을 사용하여 전역 테마 상태를 관리하는 방법을 보여줍니다.

👀 미리보기

project preview

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

  • React 의 Context API 를 사용하여 ThemeContext를 만드는 방법
  • App 컴포넌트에서 ThemeContext를 사용하여 테마에 따라 전체 앱 스타일을 변경하는 방법
  • Card 컴포넌트에서 ThemeContext를 사용하여 테마에 따라 카드 스타일을 변경하는 방법
  • ThemeProviderApp 컴포넌트를 래핑하여 애플리케이션 전체에서 테마 컨텍스트를 사용할 수 있도록 하는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

  • React Context API 를 사용하여 전역 상태를 관리하는 방법을 이해합니다.
  • useContext 훅을 적용하여 컨텍스트 값에 액세스합니다.
  • 현재 테마에 따라 다른 스타일을 구현합니다.
  • 테마를 토글하고 전역 상태를 업데이트합니다.

강사

labby
Labby
Labby is the LabEx teacher.

추천 코스

no data