10. 일정 관리 웹 애플리케이션 만들기

• 컴포넌트 구조
• |App|
  • ㄴ|TodoTemplate|
    • ㄴ|TodoInset|
      • ㄴ|TodoList|
        • ㄴ|TodoListItem|

프로젝트 및 라이브러리

$ yarn create react-app todo-app

$ cd todo-app
$ yarn add node-sass classnames react-icons

• sass를 사용할 예정이므로 node-sass를 설치해 주었습니다.
• classnames는 나중에 조건부 스타일링을 좀 더 편하게 하기 위해 설치했습니다.

prettier 설정

{
"singleQuote": true,
"semi": true,
"useTabs": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 80
}

index.css 수정

body {
  margin: 0;
  padding: 0;
  background: #e9ecef;
}

UI 구성의 컴포넌트들 설계

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

• 이 컴포넌트들은 src 디렉터리에 components라는 디렉터리를 생성하여 그 안에 저장하겠습니다.
• 컴포넌트 파일을 components 디렉터리에 넣는 이유는 기능이나 구조상 필요하기 때문이 아니라 자주 사용되는 관습이기 때문입니다.

flex 연습 사이트

• Flexbox Froggy(http://flexboxfroggy.com/#ko)

기능 구현

• 참고 출처

리액트를 다루는 기술 정리 (10)

ListItemp 렌더링

1. App.js 에서 초기 상태 todo 3개 만들기
2. todos 로 넘기기
3. map 이용해서 개수만큼 TodoListItem 순회. todo 넘기고 key 설정
4. 에서 조건 스타일링 하기 위해 cn 설정. (classnames)
5. 에서 text, checked 받고 조건부 설정, text 보여주기

ListInsert 기능 추가

1. ListItem에서 text input 상태 관리하기 ( onChange로 변화 감지 )
2. 새 객체 추가하기 (App.js 의 todos에 추가하도록 구현)
3. nextId 로컬 변수로 선언
4. onInsert 함수 사용. text 값 파라미터로 전달 받기
5. form 형식이라면 바로 onSubmit 이용 ( 클릭, Enter 둘 다 적용)

Remove 기능 추가

1. App.js 에서 onRemove 함수 설정
2. setTodos 안에 filter 바로 적용. todo.id !== todo 로 걸러내기
3. TodoList -> TodoListItem으로 함수 전달.
4. remove DOM에서 onClick = {() => onRemove(id)}로 화살표 함수를 이용하여 함수 설정

Toggle 기능 추가

1. App.js 에서 onToggle 함수 추가.
2. setTodo안에서 map을 이용해 새로운 정보로 업데이트
3. 불변성 유지하며 {...todo, checked: !todo.checked} 로 업데이트