요르딩딩

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..

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..

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; ..

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..

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 = ..

섹션5. React.js 개론// 리액트앱 생성.npm create vite@latest // package.json의 dependencies들 설치.npm i // 실행npm run dev// eslint 확장 프로그램 설치// 작성한 코드를 정적으로 검토하여 미리 오류로 띄워줌.eslinttrc.cjs > "no-unused-vars" : "off", (미사용변수 오류처리 안되도록.).eslinttrc.cjs > "react[prop-types" : "off" (안전하게 사용할수 있도록 해주지만 실습시 불필요) 5.2) React 컴포넌트 // App.jsxApp Component : HTML 태그를 반환하는 함수 (함수 컴포넌트)// 컴포넌트 생성 방법// 첫글자는 대문자!!!1. function ..

5.1) 실습 준비하기   4.2) 첫 React App 생성하기  4.3) React App 구동원리 살펴보기 npm ipublic폴더 : 이미지, 스타일 등등 정적파일 존재src폴더 : jsx 리액트코드용 확장자assets에도 정적파일 보관 가능eslintrc.cjs : 코드 스타일?index.html : 나중에 App.jsx > main.jsx > index.htmlApp.tsx > index.tsx > index.html???

3.1) Node.js를 소개합니다- 자바스크립트를 범용적으로 개발에 사용하기 위해 Node.js가 개발됨. - 기존에는 웹브라우저에서만 개발되었다가 -> Node.js 덕에 웹서버/모바일 앱/ 데스크톱 앱에서도 개발할 수 있게됨. 3.2) Node.js 설치하기- 설치확인 : cmd 창 > node -v / npm -v 입력 3.3) Node.js 사용하기[package.json]{ "name": "section03", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node src/ind..