[Context API&Custom Hook] 테마 전환 기능 구현하기

1. 사용자가 입력한 이름과 현재 날짜를 표시하는 간단한 페이지 구현

• 간단한 상태관리를 위해 **useState** 사용

2. 페이지 테마를 전환할 수 있는 기능 구현

• 전역 상태 관리를 위해 **Context API** 사용

  전역 상태 관리

• 전역 상태 관리는 두 가지 경우에서 사용
  • 모든 컴포넌트에서 필요한 데이터가 있을 때 (ex. 페이지 테마 스타일, 사용자 언어 등)

  • props drilling 문제를 해결할 때

      //Root에서 관리하는 data를 Four 컴포넌트에서 사용할 때
      <One data={data}>
            
      //One -> Two
      <Two data={data}>
            
      //Two -> Three
      <Three data={data}>
            
      //Three -> Four
      <Four data={data}>
    

• useState, useReducer, useContext 등의 상태 관리 함수를 동시에 사용할 수 있고, 여러 개 사용 가능

실수

<div className={`container ${isDarkMode ? 'dark' : 'light'}`}>

1. className="container": 모든 경우에 container 클래스가 기본으로 적용됩니다.
2. ${isDarkMode ? 'dark' : 'light'}: isDarkMode 상태에 따라 dark 또는 light 클래스가 추가로 적용됩니다.

즉, isDarkMode가 true인 경우:

<div className="container dark">

isDarkMode가 false인 경우:

<div className="container light">

• 그래서 CSS 적용시 아래 처럼 구분 (띄어쓰기 없음!!)

.container {}
.container.dark {}
.container.light {}

질문

import { ThemeProvider, useTheme } from './ThemeContext';
const { isDarkMode, toggleTheme } = useTheme(); 

• useTheme 훅을 호출하여 isDarkMode와 toggleTheme을 실제 사용

ThemeProvider를 사용하여 AppContent 컴포넌트를 감싸는 이유가 무엇인가?

function App() {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  );
}

• AppContent에서는 ThemeContext의 값을 사용할 수 있게 길을 뚫어주는 느낌!!

추가활동

Custom Hook 만들어 보기

Hook: 함수형 컴포넌트에서 상태 관리와 다양한 리액트 기능을 사용하게 함

• local storage에 todo list를 넣는 custom hook을 개발하였다.
• local storage의 경우 브라우저 내 데이터를 저장

• JSON 형태로 저장

    //GET
    const item = window.localStorage.getItem(key); 
    return item ? JSON.parse(item) : initialValue;
    //SET
    window.localStorage.setItem(key, JSON.stringify(valueToStore));
  

Local Storage 확인 방법

• 개발자 도구 ⇒ Application ⇒ Storage ⇒ Local storage ⇒ https://localhost:3000
• 여기서 삭제도 가능

스프레드 연산자 (spread 연산자)

setTodos([...todos, newTodo]); 

• ...은 JavaScript의 스프레드 연산자(Spread Operator)
• 기존의 todos 배열에 새로운 newTodo 항목을 추가하여 업데이트된 배열을 만드는 방식
• 병합 concat 느낌

코드

https://github.com/KimGyeongLock/todo_react