React class component

🌈 PureComponent

Component와 달리 PureComponent는 shouldComponentUpdate()를 구현함.
컴포넌트를 업데이트를 해야할지 알아보는 shouldComponentUpdate는 가볍게 (shallow하게) 이전의 prop과 state를 업데이트된 prop과 state와 비교한다.

업데이트가 필요하면 true를 리턴하여 업데이트하게 해준다.

import React, { PureComponent } from 'react';

class AddHabit extends PureComponent {
render() {
   <div>hello</div>
  }
}

habit.jsx의 Componenet를 PureComponent로 바꾸게 되면, shallow 비교로 인해 에러가 발생한다. 아래의 코드를 보면

동작 안됨!

  state = {
    habits: [
      { id: 1, name: 'reading', count: 0 },
      { id: 2, name: 'studying', count: 0 },
      { id: 3, name: 'eating', count: 0 },
    ],
  };

  ~~~

  increaseNum = (habit) => {
    const habits = [...this.state.habits];
    const index = habits.indexOf(habit);
    habits[index].count++;
    this.setState({ habits });
  };

increaseNum함수에서 state를 업데이트하기 위해 spread 문법을 활용하여 새로운 배열을 생성하여 객체들을 복사해 주었다. 하지만, 이럴 경우에는 shallow 복사가 되기 때문에 여전히 객체의 참조값은 같은 상태가 된다.
즉, 참조값이 같기 때문에 PureComponent의 shallow 비교를 통해서는 객체 안의 값의 업데이트를 인지하지 못하게 되는 것이다.

때문에 아래와 같이 코드를 수정해주었다.

🌈 동작됨!

  increaseNum = (habit) => {
    const habits = this.state.habits.map((item) => {
      if (item.id === habit.id) {
        return { ...habit, count: habit.count + 1 };
      }
      return item;
    });
    this.setState({ habits });
  };

map를 통해 새로운 배열을 반환하고 배열 안의 객체는 업데이트된 값을 판별하여 새로운 객체를 반환해 주어 새로운 참조값을 가지게 해준다.

결국, 업데이트된 값에 해당하는 객체는 새로운 참조값을 가지게 되어 PureComponent가 shallow 비교를 통해 업데이트를 판별할 수 있게 되어, 정상적으로 작동할 수 있게 된다.

---

PLUS)

 resetAll = () => {
    const resetNum = this.state.habits.map((v) => {
      return { ...v, count: 0 };
    });
    this.setState({ habits: resetNum });
  };

모든 값에 대해 새로운 객체를 반환하는 것 보다는 아래처럼 작성하는 것이 좋을 듯하다.

  resetAll = () => {
    const resetNum = this.state.habits.map((v) => {
      if (v.count !== 0) {
        return { ...v, count: 0 };
      }
      return v;
    });
    this.setState({ habits: resetNum });
  };

count가 이미 0인 경우는 업데이트 해줄 필요가 없기 때문에 if문으로 조건을 나누어 주어 업데이트가 필요한 객체만 새로운 객체를 반환하고 나머지는 기존의 객체를 반환하여 업데이트되지 않도록 하는 것이 좋다

---

소스코드)
solo-work/habit