App.jsx νμΌ νλμμ TodoListμ CRUD κΈ°λ₯μ λͺ¨λ ꡬνν©λλ€.
useState
κ° ν μΌ(todo)μ λ€μ μμ±μ κ°μ§λλ€:
{
id: 1, // κ³ μ μλ³μ (μ«μ)
title: "ν μΌ", // ν μΌ μ λͺ© (λ¬Έμμ΄)
completed: false, // μλ£ μ¬λΆ (λΆλ¦¬μΈ)
createdAt: "2026-03-18T12:00:00.000Z" // μμ± μκ°
}- ν μ€νΈ μ λ ₯μ°½κ³Ό "μΆκ°" λ²νΌμ΄ μμ΄μΌ ν©λλ€
- μ λ ₯μ°½μ ν μΌμ μ λ ₯νκ³ "μΆκ°" λ²νΌμ ν΄λ¦νλ©΄ μλ‘μ΄ ν μΌμ΄ λͺ©λ‘μ μΆκ°λ©λλ€
- μΆκ° ν μ λ ₯μ°½μ λΉμμ ΈμΌ ν©λλ€
- λΉ λ¬Έμμ΄μ μΆκ°ν μ μμ΄μΌ ν©λλ€
- λͺ¨λ ν μΌμ΄ λͺ©λ‘μΌλ‘ νμλμ΄μΌ ν©λλ€
- κ° ν μΌμλ μ λͺ©κ³Ό μμ± μκ°μ΄ 보μ¬μΌ ν©λλ€
- λ―Έμλ£ ν μΌμλ "μλ£" λ²νΌμ΄ μμ΄μΌ ν©λλ€
- "μλ£" λ²νΌμ λλ₯΄λ©΄ ν΄λΉ ν μΌμ
completedκ°trueλ‘ λ³κ²½λ©λλ€ - μλ£λ ν μΌμλ "μ·¨μ" λ²νΌμ΄ μμ΄μΌ ν©λλ€
- "μ·¨μ" λ²νΌμ λλ₯΄λ©΄
completedκ° λ€μfalseλ‘ λ³κ²½λ©λλ€ - μλ£λ ν μΌμ μ λͺ©μ μ·¨μμ μ΄ νμλμ΄μΌ ν©λλ€
- κ° ν μΌμ "μμ " λ²νΌμ΄ μμ΄μΌ ν©λλ€
- "μμ " λ²νΌμ λλ₯΄λ©΄ ν΄λΉ ν μΌμ΄ λͺ©λ‘μμ μ κ±°λ©λλ€
- CSS Module(
App.module.css)μ μ¬μ©ν©λλ€ App.module.cssμ.containerμ.completedν΄λμ€κ° μ 곡λμ΄ μμ΅λλ€- μΆκ° μ€νμΌλ§μ μμ λ‘κ² ν΄λ λκ³ , μ ν΄λ λ©λλ€
idλDate.now()λ₯Ό νμ©νλ©΄ κ°λ¨νκ² κ³ μ κ°μ λ§λ€ μ μμ΅λλ€createdAtμnew Date().toLocaleString()μΌλ‘ 보기 μ’κ² νμν μ μμ΅λλ€- CSS Moduleμ
import styles from './App.module.css'μΌλ‘ κ°μ ΈμμclassName={styles.container}μ²λΌ μ¬μ©ν©λλ€
βββββββββββββββββββββββββββββββββββ
β Todo List β
β β
β [ν μΌ μ
λ ₯... ] [μΆκ°] β
β β
β 리μ‘νΈ κ³΅λΆνκΈ° β
β 2026. 3. 18. μ€ν 1:00 β
β [μλ£] [μμ ] β
β β
β ~~μ₯보기~~ (μ·¨μμ ) β
β 2026. 3. 18. μ€ν 12:30 β
β [μ·¨μ] [μμ ] β
βββββββββββββββββββββββββββββββββββ