[wook] Step18 리뷰 부탁드립니다. (#27)

* refactor : 클래스형에서 함수형으로 컴포넌트 변경

1. 모든 컴포넌트를 클래스형에서 함수형으로 변경

- 함수형으로 변경할때는 this를 안쓰고 함수형 컴포넌트가 props만 받으면 됨.
- 클래스가 아닌 함수이므로 콘솔위치 , 변수위치, 함수위치 하나도 신경쓸거 없음 (대신 함수는 표현식으로 작성해야함)
-useEffect안의 콜백함수가 componentDidMount때 실행
- setTodos 로 todos 를 변경 ( 마운트시 state가 변경)

* feat: 새로운 할일 등록 기능 추가

- hooks 를 순서대로 사용하기 위한 eslint 플러그인추가
- id 생성용 react-id-genertator 추가

TodoTable 컴포넌트에 추가한것
1. input에 저장될 newTodo를  state로 등록.
2. newTodo 를 변경하기 위한 함수 changeInputData 함수도  추가
3. newTodo가 todos에 추가되도록 하는 addTodo 함수 추가
4. InputBar에 newTodo, addTodo , changeInputData props로 등록

* refactor: addTodo , deleteTodo 넘겨줄 인자 전달 방식 변경

1. 이벤트를 넘기는게 아니라 props로 전달한 값을 인자로 넘겨주는 방식으로 변경하였음.
2. 랩핑해주는 handle 함수 자식에 생성

클릭이 발생한 html태그의 이벤트객체를 넘기는것이 아니라,
props나 컴포넌트 내부에서 생성한 값(id) 을 넘겨주었고,

부모 컴퍼넌트에서 인자를 받으므로 자식 컴포넌트에서 인자를 넘겨주기위해 또는 preventDefault와 같은 사전처리를 위한
랩핑해주는 함수 handleDeleteTodo , handleAddTodo 함수를 만들어 처리

* feat: X버튼 클릭시 삭제기능 추가

todos.filter(todo=>todo.id !== id); 로 넘겨받은 id가 아닌 새로운 배열을 만들어
setTodos에 넣어주는 방식으로 구현

이게 가장 좋은 방법인지는 의문

* feat: 할일 클릭시 취소기능 구현

1. OutputRow 컴포넌트에 isClicked state를 두고 handleClick 함수를 이용하여 상태를 변경
2. isClicked를 Li 컴포넌트에 props로 전달하여 props값에 따라 다른 CSS가 적용되도록 구현

* feat: OutputTable안의 접기/펼치기 기능 구현

isOpened의 상태에 따라 다른 css 스타일이 적용되도록 구현

* feat: 로더 컴포넌트로 로딩 메세지 노출 구현

기존의 fetchInitialData 함수에서 await 과 async 를 삭제할 수 없음;;
더 쉽게 짠건데 뭐하러 때야하는지 의문

* chore: 폴더 구조 변경

* feat: 할일과 완료된일의 갯수를 보여주는 UI 마크업 구현

리팩토링하여 재사용가능한 컴포넌트용 components 폴더를 생성하고RadiusDisplater라는 컴포넌트를 components 하위의 폴더에 구현하였음.

status에 따라 css속성을 다르게 주려고 하나 어떻게 다르게 처리할지는 아직 미정 ( gren 스타일로 해보려고 함 ㅎㅎ)

* refactor: styledComponents 조건부 랜더링 구현

1. styledComponents에 props로 넘겨주어야한다.
2. 스타일드 컴포넌트에 조건부 랜더링을 할때도 object deconstructing 을 사용할 수 있다.

* refactor: useReducer , useContext로 inputBar의 add기능 구현

initialState에는 값이 한번만 들어가므로 useEffect대신 일단 todos를 하드코딩하여 구현함

* refactor: OutputRow의 delete

1. OutputRow로 props전달하지 않고 title,id 를 랜더할 수 있도록 구현
- 이때 props로 각 OutputRow를 구분할 수 있도록 idx는 넘겨주었음 ( 더 나은 방법이 있는지는 의문)
- key값을 안넘겨줘도 warning이 나오지 않음
- filter가 아닌 find를 이용해서 각 idx에 맞는 title,id값을 찾고
OutputRow에 랜더링 하도록 하였음

2. delete기능 구현

* chore: 불필요한 주석삭제

-  delete 액션일떄 ...state가 없어서 추가함

* feat:  할일과 완료된일의 갯수 기능 구현

1. OutputRow에서  todoReducer에 changeStatus 타입 추가
- 이때 갯수는 reduce로도 할 수 있지만 filter하고 length사용하는게 마음이 편해서 사용함.

2. changeStatus에선 선택된 todo를 찾고, status만 다르게해서 덮어씨우고 그 todo가 포함된 nextTodo를 state에 넣는 방식으로 구현
3. 토글을 true , false로 어떻게 해야할지 몰라
selected.status === "todo" ? "done" : "todo"
이런식으로 구현했고, 하드코딩 하는게 싫어서 내부함수를 만들어서 처리하였음.

* refactor : useEffect로 fetch 로 받아온 데이터 적용

* chore : CRA 삭제

* chore: webpack으로 수정

* refactor: 서버 url 변경

* chore: 불필요한 주석삭제

* refactor: 네이밍 변경

1. radius displayer 에서 displayer 로 컴포넌트를 변경하고,  그 안의 displayer의 스타일드 컴포넌트를 radius 로 변경

2. OutputRow, Table, TodoTable 을 TodoItem , TodoList ,TodoApp으로 변경

* chore: dev, production 용 url 변경

* refactor: 스타일드 컴포넌트 css 제거

* chore: 파일명 변경

* refactor: reducer 분리

* chore: react-hot-loader 위치 변경

* refactor: todoReducer 함수 분리

이때 export default 함수이름을 사용하면 안됨.
- export default function 으로 사용시 expression(표현식)으로 표현해야하고,
- arrow function을 사용하고 싶다면 declaration해주고 아래에 export default 로 빼줘야한다.

* refactor: newTodo state 위치변경

1. TodoApp에 있던 newTodo를 InputBar로 state의 위치를 변경하였음

2. todoReducer 가볍게 만듦
- initialState로 newTodo를 받으면 위에 있어야하는게 맞지만,
1. reducer함수가 무거워지고
2.  newTodo가 바뀔때마다 state가 바뀌어 TodoApp부터 랜더링이 일어나기때문에
newTodo 를 state에서 분리, newTodo를 change해주는 로직을 reducer에서 분리

3. 기존의 handleInputChange 함수 삭제
setNewTodo 함수가 변경해주는것이기때문에 굳이 handle함수로 감싸서 넘겨줄 필요없음.

* refactor: todosReducer 위치변경

TodoApp에서 reducer를 import 해서 Provider의 인자로 넣어주는것이 아닌, todoState에서 import해서 바로 사용하도록 하여

TodoApp -> todoState로 인자를 넘겨주는 의존관계(?)를 없앰

* refactor: 로딩상태에 따른 조건부 실행구현

1. todoApp 안의 fetch 관련 로직을 todoApp으로 이동
2. todoState의 value에 isLoading을 추가 , fetch가 성공하면  initTodoData 함수 추가후 실행
3. TodoItem은 TodoList에서 todo를 props로 받아 처리하도록 변경
4. ResultBar에서 status의 갯수를 계산하는 calcStatusCnt 함수만들고 useEffect로 실행
5. 기존의 Loader 컴포넌트삭제

* chore: 가독성을 위한 코드 정리

* refactor: useFetch 커스텀훅 생성

1. TodoState에서 생성한 init함수를 인자로 넘겨준다
2. useFetch.js의 의미
- useFetch라는 함수를 가져와서 TodoState.js파일 안의 StateProvider 컴포넌트에서 useEffect 를 사용하는것. 즉 컴포넌트가 생성된다음에 useEffect가 일어나고 useFetch에서 useEffect가 포함되어있는이유는 불러진 컴포넌트에서 사용하라는뜻이다.
3. isLoading을 리턴한다.

README.md

@@ -2,13 +2,17 @@
 ## 설계 
 
 ### 1. 컴포넌트 
-1. 전체를 감쌀 컴포넌트 :TodoTable
-2. 할일 입력하는 컴포넌트 : inputBar 
-3. 할일 목록을 감싸는 컴포넌트 : outputTable ( 해야할일 , 접기는 짜잘해서 포함시켜버림) 
-4. 할일 목록  컴포넌트 : outputRow 
+1. 전체를 감쌀 컴포넌트 :TodoApp
+2. 결과를 출력하는 컴포넌트 : ResultBar 
+3. 할일 입력하는 컴포넌트 : inputBar 
+4. 할일 목록을 감싸는 컴포넌트 : TodoList ( 해야할일 , 접기는 짜잘해서 포함시켜버림) 
+5. 할일 목록  컴포넌트 : TodoItem 
 
 ### 2. 구조 
-- TodoTable
+- TodoApp
+    - ResultBar
+        -RadiusDisplayer (todos)
+        -RadiusDisplayer (done)
     - InputBar
-    - OutputTable
-        - OutputRow
+    - TodoList
+        - TodoItem

babel.config.js

@@ -0,0 +1,18 @@
+// babel.config.js
+module.exports = function(api) {
+  api.cache(true);
+  // 여기 프리셋 및 플러그인에 추가한 것들을 babel-loader를 통해 webpack에서 사용한다.
+  const presets = [['@babel/preset-env'], ['@babel/preset-react']];
+
+  const plugins = [
+    'react-hot-loader/babel',
+    // class property 
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-transform-runtime'
+  ];
+
+  return {
+    presets,
+    plugins
+  };
+};

dist/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+<body>
+  <div id="root"></div>
+<script type="text/javascript" src="bundle.820c29be6ed22002e773.js"></script></body>
+</html>