0919_dev_react_todoLog

기웅님 코드 보면서 리뷰하기 :D

1. static Property 활용 
  static ID = 0;
  static todoItem = { id: null, whatTodo: null, status: -1, createdAt: null };

  반복되는 객체 어떻게 활용하지를 생각 했었는데! 
  고정 값 같은 경우 static  변수를 활용하자  -> 이렇게 된 경우 나는 todoModel을 만들어서 import해서 사용했는데 이 부분은 아쉽게도 
  json.parse()를 하면 프로토타입 연결이 사라져버린다 _= -> 
  결국 model을 만든걸 지우기도 / 장점을 살리고 싶어서 그대로 냅두고 프로토타입 .call해주는 function을 helper에서 다시 가지고 왔는데 
  위에 처럼 단순 객체를 spread형식으로 찍어내는 편이 더 깔끔한 것 같다. ! 


2. 이렇게 map돌리는 method같은 경우도 밖으로 빼고 안에서는 fn name으로 들어갈 수 있게 하는 편도 좋은 듯 ! 
render() {
    const mapToComponent = todoItems => {
      return todoItems
        .filter(todoItem => {
          return todoItem.whatTodo.includes(this.state.searchTerm) &&
            (this.state.status === 0 || todoItem.status === this.state.status);
        })
        .map((todoItem, key) => (
          <TodoItem
            key={key}
            handleCheck={this.changeStatusTodoItem.bind(null, todoItem.id)}
            handleRemove={this.removeTodoItem.bind(null, todoItem.id)}
            whatTodo={todoItem.whatTodo}
            status={todoItem.status}
            startDate={todoItem.createdAt}
            endDate={todoItem.createdAt}/>
        ));
    };

리액트 Router를 이용해서 Modal부분은 구현 안 했다고 봐도 전무한데 기웅님이랑 비슷하게도 구현해보면 좋을 것 같다. 아니면 Modal부분만 따로

3.Fragment를 잘 활용하자 !

오늘 한 것 정리하기

1.LocalStorage fn helper 추가해서 넣어주었다 ;;; JSON.parse JSON.stringify

id를 찾아와서 실행을 하는 과정이 있었는데 props로 id를 넘기기 떄문에 핸들 function에서 쉽게 id를 받을 수 있어서 이런 부분을 없앴다.

3. active Style 추가하기

  getTodoId(el){
    return el.closest(`[name=TodoItem]`).id
  }
  getUpdateTodo(target){
    const todoId = this.getTodoId(target)
    const {todos} = this.state;
    return {
      todoId, 
      todos,
    }
  }

4. 보여주신 Date부분 !!! JSON.parse / JSON.stringfiy부분에서 timeformat이 제거되는 부분이 생긴다 !!! Date.prototype.toJSON = dateFns.format() koLocale date-format dateTime Moment