지금까지 리액트를 공부하면서
기본기
부터스타일링
까지 살펴보았는데, 계속 이론만 공부하는 것 보다 간단한 토이 프로젝트를 해보고 싶었다.
왜냐하면, 계속 일반적인 실습 보다는 실제로 하나라도 구현 하면서 놓쳤던 기본기를 잡아보고 싶었기 때문에.❗❗
토이 프로젝트
를 해보고 싶다.😊😊Sass
를 사용하기 위해서 node-sass를 설치했다.조건부 스타일링
을 위해 classnames을 설치했고, 기본적인 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 node-sass@5.0.0
- react-icons 라이브러리는 아이콘이
SVG
형태로 이루어져 있어 아이콘의크기
,색상
은props
또는CSS 스타일
로 변경할 수 있다.
root
디렉터리에 .prettierrc
파일을 생성하여 다음과 같이 설정했다.//.prettierrc
{
"singleQuote": true, // single 쿼테이션 사용 여부
"semi": true, // 세미콜론 사용 여부
"useTabs": false, // 탭 사용 여부
"tabWidth": 2, // 탭 너비
"trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
"printWidth": 80 // 줄 바꿈 할 폭 길이
}
글로벌 스타일 파일
이 들어 있는 index.css
를 다음과 같이 설정했다.//index.css
body {
margin: 0;
padding: 0;
background: #e9ecef;
}
컴포넌트
에 대해 다음과 같이 설정했다.TodoTemplate: 일정 관리를 보여주는 컴포넌트로, 화면을 가운데 정렬 하는 기능을하며, chileren
으로 내부 JSX
를 props
로 받아 와서 렌더링 한다.
TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트로, state
를 통해 인풋
의 상태를 관리한다.
TodoListItem: 각 일정에 대한 정보를 보여주는 컴포넌트로, todo
객체를 props
로 받아와서 상태
에 따라 다른 스타일의 UI를 보여준다.
TodoList: todos
배열을 props
로 받아와 이를 배열 내장 함수 map
을 이용해서 여러 개의 TodoListItem
컴포넌트로 변환하여 보여준다.
컴포넌트
로 구성된 Todo-List를 만들어 보자.src
디렉터리에 components
라는 디렉터리를 생성하여 저장했다.