React를 사용할 때 가장 주의해야 할 점 중 하나는 state 를 직접 수정하면 안된다는 점이다.
이를 피하기 위하여 자주 사용하는 array method 들을 알아보자.

1. map()

map()은 배열 내의 모든 요소 각각에 대하여 주어진 콜백 함수를 실행한 결과를 모아 새로운 배열을 생성하여 반환한다.

가장 큰 장점은 array를 알아서 돌면서 callback함수를 실한다는 점이다. for 문을 사용할 때보다 코드도 간단해지고, 보다 빠르게 결과물을 얻어낼 수 있다는 장점이 있다.

state 는 object, array가 다양한 형태로 존재하기 때문에, state 내 array 값 내부 변화를 줘야될 경우 요긴하게 사용된다.

예시

state = {
    habits: [
      { id: 1, name: "Reading", count: 0 },
      { id: 2, name: "Coding", count: 0 },
      { id: 3, name: "Working out", count: 0 },
    ],
  };

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

/* expected result
만약 Coding을 클릭해서 handleIncrement가 실행되었다면, 아래와 같은 결과물을 기대할 수 있다

habits: [
	{ id: 1, name: "Reading", count: 0 },
  { id: 2, name: "Coding", count: 0 },
  { id: 3, name: "Working out", count: 1 },
]
*/

위와 같이 특정 부분에 값을 증가시켜야 할 때, if 문과 함께 사용하여 원하는 부분을 집어내어 변경한 다음, 해당 변화를 반영시킨 새로운 배열을 반환한다.

2. filter()

filter()는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환다.

if 문과 array 가 결합된 형태로 볼 수 있다.

이 또한, state 내에서 일부분만 꺼내야 된다던가, 일부를 삭제하는 경우에 요긴하게 사용된다.

예시

<Navbar totalCount={this.state.habits.filter((item) => item.count > 0).length} />

위의 예시의 경우 this.state.habits 의 아이템 요소 중 갯수가 0개 이상인 것들만 모아 새로운 배열을 만들어 Navbar 에 props로 전달해준다.

또다른 예시

handleDelete = (habit) => {
    const habits = this.state.habits.filter((item) => {
      return item.id !== habit.id;
    });
    this.setState({ habits });
  };

삭제를 하는 경우에도 현재 클릭한 아이템을 제외한 나머지들로만 구성된 새로운 배열을 만들어 반환하게 되는데, 이 때 사용되는 것이 filter 메소드이다.

3. spread operator

array는 아니지만, react 작업시 많이 사용되어 추가해보았다.

복사하고 싶은 array 또는 object 이름 앞에다가 ... 만 붙이면 새로운 배열에 copy가 가능하다.

함수 안에다가 인자로 바로 사용도 가능하다.

state 를 직접 건드리면 안되기에, 업데이트 해야될 사항을 spread operator를 이용하여 복제한 array에다가 직접 수정한다음, setState 를 사용하여 state 를 업데이트 하곤 한다.

예시

const hello = ["h", "e", "l", "l", "o"];
const copyHello = [...hello];

console.log(copyHello)

/* Result
["h", "e", "l", "l", "o"]
*/

// 함수의 인자로서 spread operator를 사용한 예
function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6