[리액트] 리액트에서 자주 쓰이는 자바스크립트 배열의 메서드 3가지 (concat, filter, map)

리액트에서 객체나 배열을 업데이트 해야할때 주의점

• 직접 접근해 업데이트 할 수 없다
• 불변성을 지켜주면서 업데이트를 해야한다 (기존 배열이나 객체의 복사본을 업데이트)
• 기존 코드를 변화시키는 배열의 메소드를 사용할 수 없다
  • push(추가), splice
• 기존 코드를 변화시키지 않는 배열의 메소드만 사용해야한다
  • concat(추가), filter(삭제), map(수정)

 

불변성이란?

리액트에서 객체나 배열을 업데이트할때는 불변성(immutable)을 지켜주면서 업데이트를 해야한다. 불변성이란 상태가 생성된 이후 그 상태를 변경할 수 없는 것을 의미한다. 즉 리액트에서 어떤 값을 업데이트하기 위해서는 상태 변경을 하지 않아야 한다는 것이다. 상태를 변경하지 않고 어떻게 업데이트를 할 수 있을까? 정답은 업데이트를 할때 기존의 값과 새로운 값을 가지고 있는 데이터를 재선언해 다시 메모리에 올리는 것이다.

 

리액트는 얕은 비교를 통해 새로운 값인지 아닌지를 판단한 후 새로운 값인 경우 리렌더링을 한다. 여기서 얕은 비교란 객체, 배열과 같은 참조 타입을 실제 내부 값까지 비교하지 않고 동일 참조인지(동일한 메모리 값을 사용하는지)를 비교하는 것을 뜻한다. 즉 리액트는 객체, 배열과 같은 참조 타입의 내부 값이 바뀌어도 알 수가 없으니 리렌더링이 되지 않는다. 리액트가 객체, 배열의 값이 업데이트 되었다는것을 알려면 메모리에 다시 올라가야한다. 객체, 배열의 데이터가 메모리에 다시 올라가기 위해서는 내부의 값을 수정하는 것이 아닌 다시 선언해야한다.

 

state를 바꾸고 돔을 다시 만들려면, 새로운 객체 or 배열을 만들어 새로운 참조값을 만들고, react에게 이 값은 이전과 다른 참조값임을 알려야한다.

 

리액트에서 기존 코드를 변화시키지 않는 배열의 메서드 3가지

불변성을 지켜주는 배열의 메서드

1. concat (추가)

• 배열과 배열을 합쳐 새로운 배열을 만들거나 배열에 특정한 값을 추가할때 사용하는 메서드
• 리액트에서 state값을 추가해주고 싶을 때 사용
• concat을 사용한 기존 배열이 그대로 유지되므로 불변성이 지켜진다

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = array_num01.concat(array_num02);

console.log(array_num01, array_num02)
// [0, 1, 2, 3], [3, 4, 5]

console.log(merge);
// [0, 1, 2, 3, 3, 4, 5]

2. map (수정)

• 배열의 데이터를 변환해서 새로운 배열을 만들때 사용하는 메서드
• 리액트에서 state값을 수정해주고 싶을 때 사용
• map을 사용한 기존 배열이 그대로 유지되므로 불변성이 지켜진다

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.map((array_item) =>{ 
  return array_item + 1;
});

console.log(array_num);
// [0, 1, 2, 3, 4, 5]

console.log(new_array);
// [1, 2, 3, 4, 5, 6]

3. filter (삭제)

• 배열의 데이터중에 조건에 맞는 데이터만 거를때 사용하는 메서드
• 리액트에서 state값을 삭제해주고 싶을 때 사용
• filter를 사용한 기존 배열이 그대로 유지되므로 불변성이 지켜진다

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.filter((array_item) => {
  return array_item > 3;
});

console.log(array_num);
// [0, 1, 2, 3, 4, 5]

console.log(new_array);
// [4, 5]

 

---

 

Reference

1. 리액트를 다루는 기술 (저자: 김민준) - 12장 immer를 사용하여 더 쉽게 불변성 유지하기
2. [스파르타코딩클럽] 리액트 기초반: 자바스크립트 기초(3)