목록2025/04 (5)
요르딩딩
섹션11. 최적화
10.1) 최적화란 10.2) useMemo와 연산 최적화 import "./List.css";import TodoItem from "./TodoItem";import { useState, useMemo } from "react";const List = ({ todos, onUpdate, onDelete }) => { const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if (search === "") { return todos; } return todos.filter((to..
섹션10. userReducer
9.1) useReducer를 소개합니다 9.2) 투두리스트 업그레이드 import "./App.css";import { useRef, useState } from "react";import Header from "./components/Header";import Editor from "./components/Editor";import List from "./components/List";const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Date().getTime(), }, { id: 1, isDone: false, content: "빨래하기", date: new Dat..
섹션9. 프로젝트2. TODO 리스트
8.1) 프로젝트 소개 및 준비 8.2) UI 구현하기 8.3) 기능 구현 준비하기 # Appimport "./App.css";import Header from "./components/Header";import Editor from "./components/Editor";import List from "./components/List";function App() { return ( );}export default App; .App { width: 500px; margin: 0 auto; display: flex; // 자식요소의 배치를 유연하게 해줌 flex-direction: column; // 열 기준 세로로 배치해줌 gap: 10px; ..
섹션8. 라이프사이
7.1) 라이프사이클이란? 7.2) useEffect 사용하기 import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";import { useState } from "react";function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( Simple Counter );}export defaul..
섹션7. 프로젝트1. 카운터
6.1) 프로젝트 소개 및 준비 6.2) UI 구현하기import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";import { useState } from "react";function App() { return ( Simple Counter );}export default App;const Viewer = () => { return ( 현재 카운트 : 0 );};export default Viewer;const Controller = ..