![]()
Q.여기 써있는 filters.map의 인자 value, index는 개발자의 임의인자인가, built-in인자인가..? filters.map((value, index) map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다. callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받습니다. from MDN 핵심이 되는 문장은 "callback 함수는 호출될 때 대상 요소의 값, 그 요..
ToDoList.jsx import React, { useState } from "react"; import AddTodo from "../AddTodo/AddTodo"; import { v4 as uuidv4 } from "uuid"; import Todo from "../\bTodo/Todo"; export default function ToDoList() { const [todos, setTodos] = useState(initialState); const handleAdd = (todo) => setTodos([...todos, todo]); const handleUpdate = (updated) => setTodos(todos.map((t) => (t.id === updated.id ? upda..
![]()
ToDoList.jsx import React, { useState } from "react"; import AddTodo from "../AddTodo/AddTodo"; export default function ToDoList() { const [todos, setTodos] = useState(initialState); const handleAdd = (todo) => setTodos([...todos, todo]); return ( {todos.map((item) => ( {item.text} ))} ); } const initialState = [ { id: "123", text: "장보기", status: "active" }, { id: "124", text: "공부하기", status: "a..
yarn add react-icons https://react-icons.github.io/react-icons/search?q=trash import { HiTrash } from "react-icons/hi"; ⚠️import할때 react-icons/뒤에 사용하고자하는 아이콘의 접두사를붙여줄것.
![]()
uuid설치 yarn add uuid uuid import해오기 import { v4 as uuidv4 } from 'uuid'; uuid함수 호출하기 == 고유값 생성 onAdd ({ id: uuidv4(), text, status: 'active' }) ; 다음과 같이 고유한 아이디가 생성된 것을 알 수 있다.
![]()
ToDoList.jsx import React, { useState } from "react"; import AddTodo from "../AddTodo/AddTodo"; export default function ToDoList() { const [todos, setTodos] = useState(initialState); const handleAdd = (todo) => setTodos([...todos, todo]); return ( {todos.map((item) => ( {item.text} ))} ); } const initialState = [ { id: "123", text: "장보기", status: "active" }, { id: "124", text: "공부하기", status: "a..
얻게된 것 React에 대한 기본, 심화개념 Redux개념 다음주 계획 프로젝트전 사이드프로젝트 진행하면서 React이해도 높이기
![]()
리덕스의 흐름 도식화 View 에서 액션이 일어난다. dispatch 에서 action이 일어나게 된다. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!) reducer 의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다. 출처 : https://velog.io/@annahyr/리덕스-흐름-이해하기 counter.js 모듈의 state 수정 기능 만들기 (+ 1 기능 구현해보기) (1) 어떻게 counter.js 모듈에 있는 state의 값을 변경할 수 있을까? 리덕스에..
