배열 State 업데이트하기

변경하지 않고 배열을 업데이트하기

객체 state와 마찬가지로 배열 state도 읽기 전용으로 처리해야 합니다. 즉 배열 내부의 항목을 재할당하거나 변경하면 안됩니다.

그래서 배열을 변경하지 않고 업데이트하기 위해 새로운 배열을 만들어 state 설정 함수에 전달합니다. 원본 배열을 변경시키지 않는 filter() , map() 과 같은 함수를 사용하여 원본 배열을 복사한 새 배열을 만듭니다. 이후 state에 이 새 배열을 설정합니다.

• 원본 배열을 변경시키지 않는 배열 함수들

  상황	방법
  추가	concat, […arr] ( = spread 연산자)
  제거	filter, slice
  교체	map
  정렬	배열을 복사한 이후 처리, sorted

여기서 Immer을 이용한다면 원본 배열을 변경시키는 것처럼 사용할 수 있습니다.

---

➕Immer란?

• js의 불변성 관리를 쉽게 만들어주는 라이브러리

• producer함수와 proxy를 활용하여 상태를 불변성 있게 업데이트함

• 원본 state가 아닌 draft 객체를 변경하기 때문에 직접 변경하는 것처럼 코드를 작성할 수 있음

• 코드가 간결해짐!

import produce from "immer";

const state = { todos: [{ text: "Learn Immer", done: false }, { text: "Learn Immer twice", done: false }] };

// Immer를 사용한 새로운 상태 생성
const newState = produce(state, (draft) => {
  draft.todos[0].done = true;
});

---

밑에서 배열에서 항목 추가/제거/변환/교체하는 예시를 코드와 함께 자세하게 보겠습니다.

배열에 항목 추가하기

concat이나 spread 연산자를 사용한다면 배열의 앞과 뒤에 요소를 추가할 수 있습니다.

• concat을 사용한 방법

const [artists, setArtists] = useState([]);
const [name, setName] = useState('');

const handleClickButton = () => {
	setArtists(
		// 기존 artists의 항목 + 새 항목을 마지막에 추가한 새 배열 반환
	  artists.concat({ id: nextId++, name: name })
	);
}

<button onClick={handleClickButton}>Add</button>

• spread 구문을 사용한 방법

const [artists, setArtists] = useState([]);
const [name, setName] = useState('');

const handleClickButton = () => {
	setArtists([// 요소들을 배열로 전달
    ...artists, // 기존 배열의 모든 항목을 전개
    { id: nextId++, name: name } // 마지막에 새 항목 추가
  ]);
}

<button onClick={handleClickButton}>Add</button>

만약 배열의 중간에 요소를 삽입하고 싶다면 spread 구문과 slice() 함수를 함께 사용하면 됩니다.

slice() 함수를 통해 배열의 앞부분을 잘라내 붙이고, 새 항목을 추가하여 다시 slice()로 배열의 뒷부분을 덧붙입니다. 항목들은 모두 spread 연산자로 전개되어 하나의 배열로 합쳐집니다.

const initialArtists = [
  { id: 0, name: 'Marta Colvin Andrade' },
  { id: 1, name: 'Lamidi Olonade Fakeye'},
  { id: 2, name: 'Louise Nevelson'},
];

const [artists, setArtists] = useState(initialArtist);

const nextArtists = [
  // 삽입 지점 이전 항목
  ...artists.slice(0, 5),
  // 새 항목 -> 새 배열에서 index 5로 지정
  { id: nextId++, name: name },
  // 삽입 지점 이후 항목
  ...artists.slice(5)
];

배열에서 항목 제거하기

기존 배열에서 특정 항목을 포함하지 않는 새 배열을 제공하는 방식(필터링)으로 배열을 수정하지 않고 원하는 항목을 쉽게 제거할 수 있습니다.

• filter 함수를 사용한 방법

const [artists, setArtists] = useState([]);
const [name, setName] = useState('');

const handleClickButton = (artistName) => {
  // 특정 이름을 제외한 배열 생성
  setArtists(artists.filter(artist => artist.name !== artistName));
}

<button onClick={() => handleClickButton(name)}>Add</button>

혹은 기존의 방식처럼 특정 위치의 요소를 없앤 새 배열을 반환하는 방식으로도 항목을 제거할 수 있습니다. 이때도 spread 연산자가 같이 사용됩니다.

• slice 함수를 사용한 방법

const [artists, setArtists] = useState([
  { id: 1, name: 'John' },
  { id: 2, name: 'Paul' },
  { id: 3, name: 'George' }
]);

const handleRemove = (index) => {
  // 해당 인덱스를 제외한 배열 생성
  const newArtists = [
    ...artists.slice(0, index), // 제외할 항목 이전의 배열
    ...artists.slice(index + 1) // 제외할 항목 이후의 배열
  ];
  setArtists(newArtists);
};

배열에서 항목 교체하기

배열에서 특정 항목의 값을 교체하기 위해 map() 함수를 쓸 수 있습니다.

function handleIncrementClick(index) {
  const nextCounters = counters.map((c, i) => {
    if (i === index) {
      // 클릭된 counter를 증가시킵니다.
      return c + 1;
    } else {
      // 변경되지 않은 나머지를 반환합니다.
      return c;
    }
  });
  setCounters(nextCounters);
}

배열에서 항목 정렬하기

보통 정렬에 사용하는 reverse(), sort() 함수는 기존 배열 객체를 변경시키기 떄문에 사용할 수 없습니다.

때문에 먼저 배열을 복사한 뒤 변경하는 방법을 사용합니다.

const [list, setList] = useState(initialList);

function handleClick() {
  const nextList = [...list];
  nextList.reverse(); // -> 복사한 새 배열을 거꾸로 뒤집음
  // nextList.sort() -> 복사한 새 배열을 오름차순으로 정렬
  setList(nextList);
}

이때 주의할 점은 배열을 복사할 때의 방식이 얕은 복사라는 것입니다. 복사한 새 배열의 객체는 원본과 동일한 객체를 참조하기 때문에, 복사된 배열의 객체 값을 수정하면 기존 state가 변경됩니다.

때문에 여기서는 정렬에만 사용하고 직접 값을 변경하지 않아야 합니다. 값 변경에는 위에서 안내한 함수들을 사용합니다.

• 배열의 객체를 업데이트할 때는 해당 객체의 요소를 모두 복사하여 새로운 요소를 추가하고, 추가한 요소만 변경하는 것이 좋습니다.

---

➕얕은 복사? 깊은 복사?

• 얕은 복사

  • 원본 객체의 참조값 복사

  • 원본/복사본에서 중첩된 데이터를 변경하면 서로 영향감

• 깊은 복사

  • 원본 객체의 모든 데이터 복사

  • 복사본과 원본이 완전히 다른 객체로 분리되어 서로 영향을 주지 않음