지금까지 리액트를 공부하면서 기본기 부터 스타일링 까지 살펴보았는데, 계속 이론만 공부하는 것 보다 간단한 토이 프로젝트를 해보고 싶었다.
왜냐하면, 계속 일반적인 실습 보다는 실제로 하나라도 구현 하면서 놓쳤던 기본기를 잡아보고 싶었기 때문에.❗❗

• 그래서 리액트를 공부할 때 많이 구현하는 Todo-List를 시작으로 많은 토이 프로젝트를 해보고 싶다.😊😊

1. 프로젝트 구성🌟

• 저번에 포스팅한 것 처럼 모든 코드들은 내 github에 올릴 예정이다.
• 프로젝트는 create-react-app을 사용하여 프로젝트를 생성했고, Sass를 사용하기 위해서 node-sass를 설치했다.
• 또한, 조건부 스타일링을 위해 classnames을 설치했고, 기본적인 icons는 다운받아도 되지만 리액트에서 제공하는 react-icons를 사용했다.
  * react-icons의 사용법은 여기를 클릭하면 확인할 수 있다.

// 설치 명령어
$ yarn create react-app todo-list
$ cd todo-list
$ yarn add node-sass classnames react-icons

Tip ✍

• 프로젝트에서 node-sass 연결시 버전이 안맞는 경우가 있는데, 에러 메세지를 확인하고 다음과 같은 명령어로 재설치를 통해 해결했다.

// 👉 node-sass 삭제
$ yarn remove node-sass
// 👉 node-sass 5.0.0 버전 설치
$ yarn add [email protected]

• react-icons 라이브러리는 아이콘이 SVG 형태로 이루어져 있어 아이콘의 크기, 색상은 props 또는 CSS 스타일로 변경할 수 있다.

1.1 간단한 기본 설정 ✔

• 코드 스타일을 깔끔하게 정리하기 위해 Prettier를 설정했으며, root 디렉터리에 .prettierrc 파일을 생성하여 다음과 같이 설정했다.

//.prettierrc
{
    "singleQuote": true, // single 쿼테이션 사용 여부
    "semi": true, // 세미콜론 사용 여부
    "useTabs": false, // 탭 사용 여부
    "tabWidth": 2, // 탭 너비
    "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
    "printWidth": 80 // 줄 바꿈 할 폭 길이
}

• 더 다양한 설정이 있으니 Prettier를 참고하여 원하는 설정을 하면된다.
• 추가적으로 프로젝트의 글로벌 스타일 파일이 들어 있는 index.css를 다음과 같이 설정했다.

//index.css
body {
  margin: 0;
  padding: 0;
  background: #e9ecef;
}

2. UI 구성하기 ✍

• Todo-List에 필요한 각 컴포넌트에 대해 다음과 같이 설정했다.

1. TodoTemplate: 일정 관리를 보여주는 컴포넌트로, 화면을 가운데 정렬 하는 기능을하며, chileren으로 내부 JSX를 props로 받아 와서 렌더링 한다.

2. TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트로, state를 통해 인풋의 상태를 관리한다.

3. TodoListItem: 각 일정에 대한 정보를 보여주는 컴포넌트로, todo 객체를 props로 받아와서 상태에 따라 다른 스타일의 UI를 보여준다.

4. TodoList: todos 배열을 props로 받아와 이를 배열 내장 함수 map을 이용해서 여러 개의 TodoListItem 컴포넌트로 변환하여 보여준다.

• 이렇게 총 네 개의 컴포넌트로 구성된 Todo-List를 만들어 보자.
  * 각 컴포넌트는 src 디렉터리에 components라는 디렉터리를 생성하여 저장했다.
  👉 그 이유는 기능이나, 구조상 필요한게 아닌 암묵적인 약속? 이라고 생각하자.

end