React _ ToDoList

React _ 1주차

ToDoList

 

Github : https://github.com/minnjeong/todo

 

 

코드를 작성 후 컴포넌트 분리에 대해 어려움을 겪었고, 기술매니저님께 이에 대한 질문을 했다.

질의응답 시간 후 리팩토링 한 코드를 작성해보겠다.

 

 

 

 

---

수정 전

<div className="lists">
        <div className="list">
          <span>
            Working.. 🔥
          </span>
          <div className="listWrapper">
            <div className="listContainer">
              {todo
                .filter((todo) => todo.isDone === false)
                .map((todo) => {
                  return (
                    <TodoItem todo={todo} clickRemoveHandler={clickRemoveHandler} completeHandler={completeHandler}/>
                  );
                })}
            </div>
          </div>
        </div>


        <div className="list">
          <span>
            Done..! 🎉
          </span>
          <div className="listWrapper">
            <div className="listContainer">
              {todo
                .filter((todo) => todo.isDone === true)
                .map((todo) => {
                  return (
                    <TodoItem todo={todo} clickRemoveHandler={clickRemoveHandler} completeHandler={completeHandler}/>
                  );
                })}
            </div>
          </div>

        </div>
      </div>

크게 보면 lists 아래에 완료 전 list, 완료 후 list 로 같은 내용이 반복되고 있다.

 

 

 

 

 

 

 

수정 후

 

app.js에 이렇게 쓸 수 있음

<TodoList title={'Working.. 🔥'} todo={todo} clickRemoveHandler={clickRemoveHandler} completeHandler={completeHandler}/>
<TodoList title={'Done..! 🎉'} todo={todo} clickRemoveHandler={clickRemoveHandler} completeHandler={completeHandler}/>

 

todolist.jsx 컴포넌트에 분리

export default function TodoList(props) {
  return (
    <div className="list">
          <span>
            {props.title}
          </span>

          <div className="listWrapper">
            <div className="listContainer">
              {props.todo
                .filter((todo) => todo.isDone === true)
                .map((todo) => {
                  return (
                    <TodoItem todo={props.todo} clickRemoveHandler={props.clickRemoveHandler} completeHandler={props.completeHandler}/>
                  );
                })}
            </div>
          </div>

        </div>
  )
}

 

 

 

 

 

 

troubleshooting

todolist 컴포넌트에서 todoitem이 정의되지 않았다고 한다.

 

다음에 이어서 문제 해결 방안을 써보겠다