I T H

의존성 배열을 이용해서 함수를 최적화 시켜주는 기능이다. 의존성 배열이 빈값일 경우( "[ ]" ) 최초 랜더링시에만 함수가 생성된다. - 지난 챕터에서 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..

- Drag and Drop 기능을 사용하기 위해 설치 해준다. npm install react-beautiful-dnd --save - Drag and Drop기능을 Lists.js에 넣어준다. [Lists.js] import React from "react"; import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; export default function Lists({ todoData, setTodoData }) { const handleCompleteChange = (id) => { let newTodoData = todoData.map((data) => { if (data.id === id) { data.compl..

컴포넌트를 App.js, Form.js, Lists.js로 컴포넌트를 분리시키고, TailWindCss를 사용해본다. - 아래 링크를 클릭하고 tailwindCss를 설치하고 사용해보자! https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com [ App.js ] import React from "react"; import "./App.css"; import { useState } from "react"; im..