요르딩딩

12.1) 프로젝트 소개 및 준비 12.2) 페이지 라우팅 1. 소개# 라우팅 # MPA 단점 # 정리 12.3) 페이지 라우팅 2. 라우팅 설정하기 # main.jsximport React from "react";import ReactDOM from "react-dom/client";import App from "./App.jsx";import "./index.css";import { BrowserRouter } from "react-router-dom";ReactDOM.createRoot(document.getElementById("root")).render( ); # App.jsximport "./App.css";import { Routes, Route } from "react-r..

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