refactor: add todo-list-item

[aube-dev]

코드잼을 하면서 todo-list 내부의 todo item을 todo-list-item이라는 컴포넌트로 나누어 만들어 보았습니다.

• todo라는 Todo 타입의 input을 받습니다.
• todo의 state가 바뀌어야 할 때, updateStateEvent를 발생시킵니다.
• todo를 지우려 할 때, deleteEvent를 발생시킵니다.

부모 컴포넌트인 todo-list에서는

• item을 todo로 넘겨줍니다.
• updateStateEvent의 콜백으로 switchState를 등록합니다.
• deleteEvent의 콜백으로 delTodo를 등록합니다.

React 코드로 굳이 표현하자면 이런 느낌입니다.

// TodoListItem.tsx

interface TodoListItemProps {
  todo: Todo;
  onStateUpdate?: (id: number) => void;
  onDelete?: (id: number) => void;
}

const TodoListItem = ({ todo, onStateUpdate, onDelete }: TodoListItemProps) => {
  const updateState = () => { onStateUpdate?.(todo.id); };
  const deleteTodo = () => { onDelete?.(todo.id); };

  return (
    <li>
      <div onClick={updateState}>{{ todo.content }}</div>
      <div className="todo-box-right">
        {todo.state === 'Done' ? (
          <span
            className="material-icons done"
            onClick={updateState}
          >
            done
          </span>
        ) : (
          <span
            className="material-icons none"
            onClick={updateState}
          >
            panorama_fish_eye
          </span>
        )}
        <button className="todo-del-button" onClick={deleteTodo}>
          <span className="material-icons clear-todo"> clear </span>
        </button>
      </div>
    </li>
  );
};

export default TodoListItem;

// TodoList.tsx

const TodoList = () => {
  // 로직 생략

  return (
    <div className="todo-list">
      {/* 폼 부분 생략 */}
    
      <div className="todo-list-box-container">
        <ul>
          {getTodoList().map((item) => (
            <TodoListItem
              todo={item}
              onDelete={delTodo}
              onStateUpdate={switchState}
            />
          ))}
        </ul>
      </div>
    </div>
  );
};

export default TodoList;

Angular스러운 방법인지는 스스로 판단할 수가 없지만, @Output과 EventEmitter로 만든 구조가 대응되는 React 코드에 비해 선언적인 것이 인상적이었습니다. 한 번 확인해 보시고 의견 남겨주세요!