React 에서 라이트 모드와 다크 모드 전환 구현 방법

소개

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

👀 미리보기

project preview

🎯 과제

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

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

🏆 성과

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

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

프로젝트 설정

이 단계에서는 프로젝트를 설정하고 필요한 종속성을 설치하는 방법을 배우게 됩니다.

코드 편집기를 열고 프로젝트 디렉토리로 이동합니다.

├── components
│ └── Card.js
├── contexts
│ └── ThemeContext.js
├── App.css
├── App.js
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js

파일 설명:

components 디렉토리에는 모든 컴포넌트 파일이 포함되어 있습니다.
contexts 디렉토리에는 완성해야 하는 ThemeContext.js 파일이 포함되어 있습니다.

이것은 React 프로젝트이므로 다음 명령을 실행하여 종속성을 설치해야 합니다.

npm install

종속성을 설치한 후, 다음 단계를 따라 프로젝트에 액세스하십시오:

터미널에서 다음 명령을 실행하여 로컬 서버를 시작합니다.

npm start

코딩 환경의 오른쪽에 있는 웹 서버를 엽니다. 아래와 같이 정적 효과가 표시됩니다. 현재 "Dark Mode" 버튼을 클릭해도 아무런 변화가 없습니다.

incomplete dark mode button

ThemeContext 생성

이 단계에서는 React 의 Context API 를 사용하여 ThemeContext 를 만드는 방법을 배우게 됩니다. 이 단계를 완료하려면 아래 단계를 따르세요:

src/contexts 디렉토리에 있는 ThemeContext.js 파일을 엽니다.
React.createContext()를 사용하여 ThemeContext를 생성합니다:
```
export const ThemeContext = React.createContext();
```
App 컴포넌트를 래핑하고 테마 컨텍스트를 제공할 ThemeProvider 컴포넌트를 생성합니다:
```
export const ThemeProvider = (props) => {
  const [theme, setTheme] = React.useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
};
```
ThemeProvider 컴포넌트는 theme 상태를 "light"로 초기화하고 theme 및 setTheme 값을 컨텍스트에 제공합니다.

App 컴포넌트에서 ThemeContext 사용

이 단계에서는 테마에 따라 전체 앱 스타일을 변경하기 위해 App 컴포넌트에서 ThemeContext를 사용하는 방법을 배우게 됩니다.

src/App.js 파일을 엽니다.
useContext 훅을 사용하여 ThemeContext에서 theme 값에 액세스합니다:
```
const { theme } = useContext(ThemeContext);
```
theme 값에 따라 다른 스타일을 적용하도록 App 컴포넌트의 JSX 를 업데이트합니다:
```
return (
  <div className={theme === "light" ? "app app-light" : "app app-dark"}>
    <Card></Card>
  </div>
);
```
app-light 및 app-dark 클래스는 theme 값에 따라 메인 div 요소에 적용됩니다.

Card 컴포넌트에서 ThemeContext 사용

이 단계에서는 테마에 따라 카드 스타일을 변경하기 위해 Card 컴포넌트에서 ThemeContext를 사용하는 방법을 배우게 됩니다.

src/components/Card.js 파일을 엽니다.

useContext 훅을 사용하여 ThemeContext에서 theme 및 setTheme 값에 액세스합니다:

export const Card = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  // ...
};

테마를 토글하는 handleThemeToggle 함수를 구현합니다:
```
const handleThemeToggle = (e) => {
  setTheme(theme === "light" ? "dark" : "light");
};
```
이 함수는 버튼을 클릭하면 ThemeContext의 theme 값을 업데이트합니다.

ThemeProvider 로 App 컴포넌트 감싸기

이 마지막 단계에서는 애플리케이션 전체에서 테마 컨텍스트를 사용할 수 있도록 ThemeProvider로 App 컴포넌트를 래핑하는 방법을 배우게 됩니다.

src/index.js 파일을 엽니다.
ThemeContext.js 파일에서 ThemeProvider를 가져옵니다:
```
import { ThemeProvider } from "./contexts/ThemeContext";
```

ReactDOM.render 함수에서 ThemeProvider로 App 컴포넌트를 래핑합니다:

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

이제 App 컴포넌트와 해당 자식 컴포넌트는 useContext 훅을 사용하여 ThemeContext에서 theme 및 setTheme 값에 액세스할 수 있습니다.

챌린지를 완료한 후, 결과는 다음과 같아야 합니다:

theme switch demonstration gif

축하합니다! 프로젝트를 완료했습니다. 이제 카드 컴포넌트의 버튼을 클릭하여 라이트 모드와 다크 모드 간을 전환할 수 있습니다.

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.