[ 자바스크립트 스터디 ] mission2 - 코드리뷰를 통해 배운 점들

1. Data의 Immutability 지키기

세션에서도 나왔던 내용인데, 이렇게 하는 편이 웹 페이지가 예측 가능한 동작을 할 수 있게 해준다.

변경 전

데이터를 let으로 선언하여 내용을 바꿨다.

this.completeTodo = (index) => {
    data[index].isCompleted = !data[index].isCompleted;
    this.setState(data);
  };

변경 후

해당하는 index의 데이터에 대해서 완료 처리를 한 새로운 배열을 만들었다!

this.completeTodo = (index) => {
    const newData = [
      ...this.data.slice(0, index),
      {
        text: this.data[index].text,
        isCompleted: !this.data[index].isCompleted,
      },
      ...this.data.slice(index + 1)];
    this.setState(newData);
  };

2. component간 통신

Lucas님이 다른 분의 코드에 남겨주신 리뷰... 나도 똑같은 짓을 하고 있었다😮

특정 component의 instance를 다른 component에서 접근하는 것은 지양해야 합니다. component간 통신은 parameter로 전달 받는 특정한 값과 method에 국한되어야 합니다. 만약 마구잡이로 다른 component의 property에 접근하여 화면을 바꾼다면 나중에 application이 커졌을때 디버깅이 힘들게됩니다.

변경 전

App component의 인스턴스인 app에 있는 addTodo method를 이용해서 addTodo를 실행시키고 있다.

export default function TodoInput($todoInput, $todoForm, app) {
  this.addTodo = (e) => {
      const { value } = this.$todoInput;
      if (value) {
        app.addTodo(value);
      }
      this.$todoInput.value = '';
  }
}

변경 후

App component의 method만 전달받아 addTodo를 실행시킨다.

export default function TodoInput($todoInput, $todoForm, addTodo) {
  this.addTodo = (e) => {
      const { value } = this.$todoInput;
      if (value) {
        addTodo(value);
      }
      this.$todoInput.value = '';
  }
}

3. 코드 정리

변경 전

const completedCount = data.filter(({ isCompleted }) => isCompleted === true).length;

변경 후

true인지를 비교하는 부분을 생략하여 더 간단한 코드를 작성할 수 있다😀

const completedCount = data.filter(({ isCompleted }) => isCompleted).length;