REACT19 (react-ToDoList) 에디팅, 필터링 기능 추가 Edit기능 추가에 editTask()함수 추가: 배열에서 삭제 대신 변경된 배열을 반환하기 위해 editTask 내 Array.prototype.filter() 대신 Array.prototype.map() 사용editTask를 컴포넌트 prop으로 전달 (deleteTask와 동일한 방식)// #스텝1: 에 editTask()함수 추가function editTask(id, newName) { const editedTaskList = tasks.map((task) => { // if this task has the same ID as the edited task if (id === task.id) { // Copy the task and update its name ret.. 2024. 12. 4. (react) 작업된 소스 합치기 App.jsxApp.jsx에 useState를 가져와서 작업을 상태에 저장하기 위해 App.jsx파일 맨 상단에 import 추가props.tasks를 useState() 후크에 전달하기 위해 App()함수 내 맨 위에 const ... 선언props.tasks 대신 task를 매핑한 결과가 되도록 taskList 매핑을 변경 taskList 상수 수정// #스텝1: useState를 App.jsx에 가져와 상태로 저장하기 위해import { useState } from "react";// #스텝2: props.tasks를 useState() hook에 전달하기 위해 App()함수 맨 위에 const... 추가const [tasks, setTasks] = useState(props.tasks);// #스.. 2024. 11. 27. (react) Events & state 처리해보기 어제까지 To Do List앱의 컴포넌트화까지 완료가 되었는데... 뭔가 어렵지 않은 내용인 것 같지만, 실제로 하나하나 해보니 역시 쉽게쉽게 되는 건 없는 듯... 이제 To Do List앱이 실제로 인터랙티브하게 구동되도록 이벤트 처리, 콜백 처리 등을 공부해보면 어느정도 리액트에 대해 가냘프게나마 알 수 있지 않을까... 하는... 작은 희망을 갖고 계속 공부를 해 보겠음~ ㅋ 이벤트 핸들링Hello? 투두앱에 이벤트를 적용하기 앞서 JSX에서의 이벤트 작성법을 살짝 알아보면,예를 들어 지금까지는 위 코드와 같이 js를 사용을 했다면, jsx에서는 아래 코드와 같이 이벤트 핸들링을 직접 jsx요소에 작성해야 함. alert("Hello!")}> Hello? 위 코드와 같이 JSX에서는 카멜케.. 2024. 11. 26. (react) 컴포넌트 만들기4 어제 map() 함수를 사용해서 코드가 반복되는 부분을 줄여본 후 페이지는 위 캡쳐와 같이 잘 나옴~이제 React는 배열에서 데이터를 렌더링하기 때문에 컴포넌트에 key prop을 전달하여 식별할 수 있음. 키는 유니크하게 사용되어야 하는데, key는 이미 React가 관리하는 prop이기 때문에 각 task의 id값을 키로 재사용해야 하면 됨. 참고로 React에서는 반복문으로 렌더링하는 것은 모두 유니크한 키를 전달해야 한다고 함~ const taskList = props.tasks?.map((task) => ( )); 나머지 부분들 모두 컴포넌트로 만들기, 등 남은 부분들도 컴포넌트로 변경 작업을 해줘야 함~ 터미널을 열고 아래 명령어 실행 #방법 1touch src/components/.. 2024. 11. 25. (react) 반복작업 줄이기 지금까지 만든 코드는 각 prop의 값만 다르고 반복적이기 때문에 javascript의 iteration을 이용해서 코드를 정리해줄 수 있음~코드의 다른 부분은 객체 배열을 사용해서 데이터를 만들어줌.const DATA = [ { id: "todo-0", name: "Eat", completed: true }, { id: "todo-1", name: "Sleep", completed: false }, { id: "todo-2", name: "Repeat", completed: false },]; 그리고 DATA를 에 tast라는 prop으로 전달해주는데, src/main.jsx 내부에서 구성 요소 호출을 아래 코드와 같이 업데이트 해줌. DATA 배열은 이제 App 구성 요소 내부에서 props.. 2024. 11. 24. (react) 컴포넌트 만들기 2 유니크한 만들기props를 이용해서 컴포넌트의 일부만 변경해줄 수 있는데, App.jsx에서 의 name 속성에 각각 prop을 지정함. 다시 Todo.jsx로 가서 아래와 같이 Todo함수를 수정해줌.function Todo(props) { return ( {props.name} Edit {props.name} Delete {props.name} );}export default Todo; 코드를 작성하고 나면 위의 캡쳐같이 모든 checkbox가 선택된 상태로 나오게 된다. App.jsx에.. 2024. 11. 23. (react) 컴포넌트로 만들기 만들기vscode의 터미널을 열고 아래과 같이 src폴더 내에 components폴더를 만들고,다시 그 안에다가 Todo.jsx파일을 만들어 줌.#src폴더 내에 components폴더 생성mkdir src/components#생성된 components폴더에 Todo.jsx파일 생성#(윈도우의 경우 해당 폴더로 이동해서 echo -n > Todo.jsx와 같이 echo명령어로 작성)touch src/components/Todo.jsx Todo.jsx에 Todo라는 함수를 만든 후App.jsx파일로 가서 첫번째 ... 를 복사하고,이걸 일단 그대로 Todo.jsx에 붙여줌.function Todo() { return ( Eat .. 2024. 11. 22. (react) Todo List App 단계별 만들기 React 관련 주변 기본적인 지식은 어느정도 둘러봤으니 이제 투두리스트 앱을 만들어보면서 감을 올려보도록 해보겠음~사용할 에디터는 마소에서 만들어준 vscode! ㅎㅎ 1. 프로젝트 설정1-1. "todo-app"이라는 이름의 프로젝트를 생성npx create-react-app todo-app 1-2. "todo-app" 폴더로 이동cd todo-app 1-3. 개발서버 구동npm start 1-4. 브라우저에 기본 react app 시작페이지 표시됨. 2. src/App.js 파일 수정"src폴더 ＞ App.js파일"에 있는 App()함수를 모두 지우고 아래 코드를 복붙해줌~function App(props) { return ( TodoMatic .. 2024. 11. 21. (react) create react app 폴더 구조와 파일npx create-react-app으로 설치를 하게되면 아래와 같은 폴더 및 파일이 만들어짐. 이때 다음 파일은 이름을 수정하면 절대절대 노노노~public/index.html: 페이지 템플릿임.src/index.js: 자바스크립트의 시작점임.위 2개 파일 이외에 다른 파일은 삭제 또는 변경 가능하며, src폴더 내에 폴더 생성 등이 가능하며, webpack에서 처리 가능하도록 js나 css는 src내부에 위치시켜야 함. https://create-react-app.dev/docs/folder-structure/ Folder Structure | Create React AppAfter creation, your project should look like this:create-rea.. 2024. 11. 20. 이전1 1 2 3 다음 728x90 반응형
