$$config title: 22.08.01 [React] keywords: - IT - React $$ - [세팅](https://velog.io/@jayjay28/VScode-React-emmet-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0) - [불변성 관련](https://kyounghwan01.github.io/blog/React/immer-js/#%E1%84%87%E1%85%AE%E1%86%AF%E1%84%87%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%E1%86%BC-%E1%84%8C%E1%85%B5%E1%84%8F%E1%85%B5%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5-state-%E1%84%87%E1%85%A1%E1%84%81%E1%85%AE%E1%84%80%E1%85%B5) # 수업내용 --- ## 폴더명[react-todolist] --- ## src > App.js ```js import React, { useState } from "react"; function App() { const [todos, setTodos] = useState([]); const [todo, setTodo] = useState(""); const onChange = (e) => { setTodo(e.target.value); }; const onSubmit = (e) => { e.preventDefault(); if (todo === "") { alert("1글자 이상 입력해주세요"); return; } // 새로운 배열을 만드는 방법 { /*const newArr = []; for (let i = 0; i < todos.length; i++) { newArr[i] = todos[i]; } newArr.push(todo); setTodos(newArr);*/ } // concat을 이용하는 방법 // setTodos((currentArray) => currentArray.concat(todo)); setTodos((currentArray) => [todo, ...currentArray]); setTodo(""); }; return (

할 일

{todo}

); } export default App; ``` --- ## src > index.js ```js import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); ``` --- #### 새리엑트 프로젝트 만들기 - npx create-react-app 폴더명