I T H

보통의 웹 프로젝트에서 프론트의 ui 작업과 이벤트 처리작업이 끝나면 axios를 사용해서 백앤드의 Spring or Node.js등을 이용해서 DB와 연결시키면 된다. 이번챕터는 간단하게 locaStorage를 사용해서 페이지 새로고침(refresh)시 데이터가 없어지지 않고 유지되도록만 해보겠다. - 아래와 같이 todoData가 변경되는 부분들 아래에 다 넣어준다. localStorage.setItem("todoData", JSON.stringify(newTodoData)); [App.js] import React, { useCallback } from "react"; import "./App.css"; import { useState } from "react"; import Lists from "..

[전체 리스트 삭제] - App.js의 return 안에 리스트 전체지우기 버튼생성 후 클릭이벤트 시 호출되는 함수를 만들어준다. DeleteList const handleRemoveClick = () => { setTodoData([]); }; [결과화면] - DeleteList 버튼 클릭시 오늘계획리스트가 모두 삭제된다. [리스트 수정] [List.js] 내용 변경 - List.js에서 State - isEditing, updateTitle 생성 - update onClick이벤트 및 함수추가 - 조건문으로 isEditing이 true일때 업데이트 기능 실행 import React, { useState } from "react"; const List = React.memo( ({ id, title, ..

의존성 배열을 이용해서 함수를 최적화 시켜주는 기능이다. 의존성 배열이 빈값일 경우( "[ ]" ) 최초 랜더링시에만 함수가 생성된다. - 지난 챕터에서 userMemo로 랜더링을 최소화 했지만, 함수가 만약 App -> Lists -> List컴포넌트로 props를 통해 내려준다면 다시 컴포넌트가 호출되기 때문에 useCallback함수를 사용해서 최적화 시켜준다. 1. [List.js]에 있는 함수중 handleClick이라는 함수를 [App.js]로 옮겨서 App -> Lists -> List컴포넌트로 props를 전달하도록 만듬. 2. handleClick함수를 useCallback으로 감싼후 의존성 배열 [ ]에 todoData를 넣어준다 3. 배열안에 들어 있는 todoData가 변하지 않을땐..

React.memo를 사용해서 불필요한 렌더링을 최소화 할수있다. 아래 화면은 글씨를 쓸때마다 List,Lists 컴포넌트가 랜더링 된다. 불필요한 렌더링을 최소화시키려면 해당 컴포넌트를 React.memo로 감싸주면 됨. [Lists.js] - rafce를 눌러서 함수 형식을 바꿔준후(function -> const) - React.memo로 감싸준다. import React from "react"; import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; import List from "./List"; const Lists = React.memo(({ todoData, setTodoData }) => { console.l..

[Lists.js] import React from "react"; import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; import List from "./List"; export default function Lists({ todoData, setTodoData }) { const handleEnd = (result) => { console.log("result", result); if (!result.destination) return; const newTodoData = todoData; //1. 변경시키는 아이템을 배열에서 지워줌. //2. return 값으로 지워진 아이템을 잡아줌. const [reordere..