열이의 개발블로그

CSS를 추가하여 투두 리스트를 꾸며봅시다. ✅ App.js 수정하기 import { useState } from "react"; import "./App.css"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => { setToDo(event.target.value); }; const onSubmit = (event) => { event.preventDefault(); if (toDo.trim() !== "") { setToDos((currentArray) => [ ...currentArray, { text: toDo, checked:..

App.js에 스크립트 파트를 추가하여 동작하도록 만들어 봅시다. ✅ 새로운 할 일 작성하기 import { useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => { setToDo(event.target.value); }; return ( Todo List + ); } export default App; useState 훅을 사용하여 input 태그에 입력한 값을 toDo라는 문자열 state로 지정해줍니다. input 태그에는 value 값으로 toDo를 중괄호로 사용해서 지정해주고 만약 input의 값이 변경된다면 onChange 이벤트가 발생하여 onChange..

React.js로 투두 리스트를 만들어 봅시다. ✅ 프로젝트 생성 npx create-react-app todo todo 라는 이름을 가진 프로젝트를 생성해줍니다. 터미널에 코드를 입력한다면 설치가 진행되고 위와 같이 로그가 나오면 프로젝트 생성이 완료된 것을 의미합니다! 맨 아래 부분에 있는 코드를 입력하여 프로젝트를 실행해봅시다. cd todo npm start 위와 같은 웹 페이지가 자동으로 열린다면 성공적으로 프로젝트가 실행된 것입니다! ✅ App.js 수정 우선 기본으로 작성된 App.js 파일을 수정해줍니다. React는 index.js를 바탕으로 실행되며 index.js 안에서 App.js를 불러와 랜더링하여 화면에 보여집니다. function App() { return ( Todo List..