따라하며 배우는 리액트 A-Z - To-do 앱 최적화하기 - [John Ahn]

섹션 3 To-DO 앱 최적화 하기

React Hooks이란 무엇인가?

 

오른쪽과 같이 커스텀 훅을 개발자가 만들어 왼쪽과 같은 복잡한 로직을가진 코드를 오른쪽 처럼 간결하게 만들 수 있다.

 

 

TO -DO 앱 클래스 컴포넌트에서 함수형 컴포넌트로 바꾸기

 

 

state와 props

 

할 일 목록 부분을 위한 컴포넌트 생성하기(컴포넌트 분리하기)

 

 

 

구조 분해 할당(Destructuring)

 

 

Form 부분을 위한 컴포넌트 생성하기

 

 

 

 

 

 

리액트 모듈 설치 시 나는 종속성(dependency) 에러 해결방법

 

리액트18 버전에서 라이브러리들을 설치할 때 
종속성에 관한 에러가 날 때가 많이 있습니다. 

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!  react@"^18.1.0" from the root project
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.1" from react-dnd...

 

[원인]

unable to resolve dependency tree
리액트 18 버전 라이브러리와 설치하려는 해당 라이브러리의 종속성이 안 맞기 때문입니다.

 

[해결 방법]

이럴 때는 여러 가지 해결방법이 있는데 
첫 번째는 리액트 버전을 17로 낮추는 것인데 별로 좋은 방법은 아닙니다. 
다른 방법은 npm 대신에 yarn을 이용해서 yarn install로 종속성을 설치해주는 방법입니다. 
만약 yarn으로 설치해도 안된다면 
npm의 강제 설치 옵션으로 설치해주시면 됩니다.

 

--legacy-peer-deps :  기존 버전 다 무시하고 일단 설치.

--force : package-lock.json에 몇가지의 다른 의존 버전들을 추가하면서 설치.

 

 

 

 

 

TailWindCss소개

 

 

 

 

TailWindCss로 Todo 앱 스타일링 해주기

 

 

 

 

Drag and Drop 기능 추가하기

 

 

 

 

 

 

react-beautiful-dnd react 18 버전에서 나는 에러 해결 방법

 

 

 

 

 

 

리액트 불변성 지키기

 

 

 

 

 

 

 

List 컴포넌트 생성하기

 

 

 

 

 

 

 

 

 

 

 

 

React.memo를 이용한 렌더링 최적화

 

 

 

 

 

 

 

useCallBack을 이용한 함수 최적화

 

 

 

 

 

 

 

 

 

use Meomo를 이용한 결과값 최적화

 

 

할일 리스트 모두 지우기 버튼 생성

 

 

 

 

 

 

 

 

 

 

 

 

할일 목록을 수정하는 기능 추가하기

 

localStorage에 todoData 값 담기