08월 21일 TIL

프론트엔드를 지향하는 사람들은 한번씩은 TodoList를 만들어 보았을것이다. 물론, 만들면서 렌더링을 하는 부분과 상태를 관리하는 부분을 분리해야한다는 말도 많이 들었을 것이다.

구현하는데 다양한 방법이 있겠지만, 나는 리엑트스럽게? 만들어 보았다.

export default class Count extends Component {
  constructor(...rest) {
    super(...rest);
    this.render();
  }

  template() {
    const { todoData } = this.props;

    const successCount = (data) => {
      let count = 0;
      data.forEach((el) => el.isCompleted && (count += 1));
      return count;
    };

    return `
      <h3>완료한 Todo의 갯수</h3>
      <span>완료한 Todo 갯수: ${successCount(todoData)}</span>
      <span>전체 Todo 갯수:${todoData.length} </span>
    `;
  }
}

코드의 일부분인데 얼핏보면 살짝 비슷한것 같기도하다. 하지만 아직 고쳐야할점이 많은것 같다...😅 최대한 단일 책임원칙을 지켜가면 만들어보는것이 목표이다.