9-1. 일정관리 웹 애플리케이션 만들기

지금까지 배운 지식을 사용하여 일정관리 애플리케이션을 만들어 보겠습니다.

index.css와 App.js를 수정합니다!

react-icons 라이브러리 설치

이번 프로젝트에서는 react-icons 라이브러리를 사용할것이므로, 라이브러리를 설치해줘야합니다

npm install react-icons

라이브러리 사용법
react-icons 사이트

import { 사용할아이콘이름 } from 'react-icons/md';
...
<사용할아이콘이름/>
...

사진에보이는 Md123, Md3DRotation, MdAbc, MdAccessibilltyNew처럼
정해진 아이콘명을 {} 안에 넣고 import한뒤
컴포넌트를 사용하듯 <사용할아이콘명/>으로 넣어주면 됩니다.

UI 구성하기

앞으로 만들 컴포넌트를 용도별로 설명하겠습니다.

1. TodoTemplate
   화면을 가운데에 정렬시켜주며, 앱 타이틀(일정관리)를 보여줍니다.
   children으로 내부 JSX를 props로 받아 와서 렌더링합니다.
   
   
2. TodoInsert
   새로운 항목을 입력하고 추가할 수 있는 컴포넌트입니다.
   state를 통해 인풋의 상태를 관리합니다.
   
   
3. TodoListltem
   각 할 일 항목에 대한 정보를 보여 주는 컴포넌트입니다.
   todo객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여줍니다.
   
   
4. TodoList
   todos 배열을 props로 받아 온 후,
   이를 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포넌트로 변환하여 보여 줍니다.

이렇게 총 네 개의 컴포넌트를
src디렉터리에 components디렉터리를 생성하여 그 안에 저장하겠습니다.
components 디렉터리에 넣는 이유는 기능이나 구조상의 필요성이 아닌, 자주 사용하는 관습 때문입니다.