[리액트 따라하며 배우기] 간단한 투두리스트 React+typescript

안녕하세요 이번엔 React+typescript를 이용한 todolist 프로젝트를 공유하려고 합니다.

 

개발 진행과정은 이렇습니다.

1. cra를 통해 리액트 프로젝트를 만든다.
2. type을 담을 파일을 만든다.(type.tsx)
3. 2개의 컴포넌트 구성을 생각하고 파일을 만든다.(InsertItme.tsx,ItemList.tsx)
4. InsertItem.tsx를 개발한다.
5. ItemList.tsx를 개발한다.
6. style.css를 통해 디자인한다.
7. localStorage를 이용해 브라우저에 데이터를 저장한다.(새로고침해도 데이터가 지워지지 않음)

 

깃허브 : https://github.com/jdy0120/frontendproject

유튜브 영상 : https://youtu.be/Ipc8NzFF9kE

 

위 영상을 따라하면 간단한 todolist를 만드실 수 있습니다.

 

위 프로젝트를 하면 배우는 것

• cra를 이용해 react+typescript프로젝트 생성 방법

 

• react+typescript를 이용한 개발 방법

 

• useState, useEffect 사용법

 

• typescript에서 prop.drilling(하위 컴포넌트로 prop을 보내는 것)방법

 

• style.css를 이용해 스타일 적용 방법

 

• localStorage를 이용해 브라우저에 데이터를 저장하는 방법

 

 

스타일은 유튜버 Code&Coding의 style.css파일을 참고했습니다.