State에서 객체 업데이트

상태(state)는 객체를 포함하여 모든 종류의 JavaScript 값을 저장할 수 있습니다. 그러나 리액트 상태에 있는 객체를 직접 변경해서는 안됩니다. 대신, 객체를 업데이트할 때는 새로운 객체를 생성하거나 기존 객체의 사본을 만들고, 그 사본을 상태로 설정해야 합니다.

다음 내용을 배우게 됩니다.

• 리액트 상태에서 객체를 올바르게 업데이트하는 방법
• 객체를 변경하지 않고 중첩된 객체를 업데이트하는 방법
• 불변성이란 무엇이며, 어떻게 깨지 않게 할 것인지
• Immer를 사용하여 객체 복사를 간소화하는 방법

무엇이 변이인가요?

상태에는 숫자, 문자열, 불리언과 같은 모든 종류의 JavaScript 값들을 저장할 수 있습니다.

const [x, setX] = useState(0);

지금까지 숫자, 문자열, 불리언과 같은 값들을 다루었습니다. 이러한 종류의 JavaScript 값은 "불변"이라고 하며, 변경할 수 없거나 "읽기 전용"입니다. 값을 교체하기 위해 재렌더링을 트리거할 수 있습니다.

setX(5);

x 상태가 0에서 5로 변경되었지만, 숫자 0 자체는 변경되지 않았습니다. JavaScript에서 기본 제공하는 원시값인 숫자, 문자열, 불리언과 같은 값들은 변경할 수 없습니다.

이제 객체를 생각해보세요.

const [position, setPosition] = useState({ x: 0, y: 0 });

기술적으로 객체 자체의 내용을 변경하는 것은 가능합니다. **이를 "변이(mutation)"**이라고 합니다.

position.x = 5;

그러나 리액트 상태에 있는 객체는 기술적으로 변경 가능하지만, 그들을 숫자, 불리언, 문자열과 같이 읽기 전용인 것처럼 취급해야 합니다. 객체를 변경하는 대신 항상 새로운 객체로 대체해야 합니다.

상태를 읽기 전용으로 취급하기

즉, 상태에 저장한 JavaScript 객체를 읽기 전용으로 취급해야 합니다.

이 예제는 현재 포인터 위치를 나타내기 위해 상태에 객체를 저장합니다. 레드 닷은 미리보기 영역에 터치하거나 커서를 이동시킬 때 움직이는 것이 목표입니다. 그러나 닷은 초기 위치에 그대로 있습니다.

문제는 다음 코드 부분에 있습니다.

onPointerMove={e => {
  position.x = e.clientX;
  position.y = e.clientY;
}}

이 코드는 이전 렌더링에서 position에 할당된 객체를 수정합니다. 그러나 상태 설정 함수를 사용하지 않고 객체를 변경하면 리액트는 해당 객체가 변경되었다는 사실을 알 수 없습니다. 따라서 리액트는 어떠한 변화도 일어나지 않습니다. 이미 식사를 한 후에 주문을 변경하려는 것과 같습니다. 상태를 변이시키는 것은 몇 가지 경우에 동작할 수 있지만 권장하지 않습니다. 렌더링 내에서 액세스할 수 있는 상태 값을 읽기 전용으로 취급해야 합니다.

이 경우 실제로 재렌더링을 트리거하기 위해 새로운 객체를 생성하고 해당 객체를 상태 설정 함수에 전달해야 합니다.

onPointerMove={e => {
  setPosition({
    x: e.clientX,
    y: e.clientY
  });
}}

setPosition을 사용하여 리액트에게 다음을 알립니다.

• position을 이 새로운 객체로 대체하고
• 이 컴포넌트를 다시 렌더링하라고 요청합니다.

이제 빨간 닷이 미리보기 영역에서 터치하거나 커서를 올리면 포인터를 따라 움직임을 확인할 수 있습니다.

position.x = e.clientX;
position.y = e.clientY;

const nextPosition = {};
nextPosition.x = e.clientX;
nextPosition.y = e.clientY;
setPosition(nextPosition);

setPosition({
  x: e.clientX,
  y: e.clientY
});

스프레드 구문을 사용하여 객체 복사하기

이전 예제에서 position 객체는 항상 현재 커서 위치에서 새로 생성됩니다. 그러나 종종 기존 데이터를 새로 생성하는 객체에 포함시키고 싶을 수 있습니다. 예를 들어, 하나의 필드만 업데이트하고 다른 모든 필드의 이전 값을 유지하고 싶을 수 있습니다.

이 입력 필드는 작동하지 않습니다. onChange 핸들러가 상태를 변이시킵니다.

예를 들어, 다음 코드는 이전 렌더링에서 상태를 변이시킵니다.

person.firstName = e.target.value;

원하는 동작을 얻기 위해선 실제로 새로운 객체를 생성하고 setPerson에 전달해야 합니다. 그러나 여기서는 기존 데이터를 복사하여 새로운 객체에 포함시켜야 합니다. 왜냐하면 하나의 필드만 변경되었기 때문입니다.

setPerson({
  firstName: e.target.value, // 입력 필드에서 새로운 이름
  lastName: person.lastName,
  email: person.email
});

... 객체 펼침 구문을 사용하여 각 속성을 복사하지 않아도 됩니다.

setPerson({
  ...person, // 기존 필드 복사
  firstName: e.target.value // 하지만 이 필드만 변경
});

이제 양식이 작동합니다!

각 입력 필드에 대해 별도의 상태 변수를 선언하지 않았음에 유의하세요. 대형 양식의 경우 모든 데이터를 객체에 그룹화하여 유지하는 것이 매우 편리합니다. 단지 올바르게 업데이트하기만 하면 됩니다!

... 스프레드 구문은 "얕은(shallow)" 복사입니다. 한 단계까지만 복사되지만 빠릅니다. 중첩된 속성을 업데이트하려면 스프레드 구문을 여러 번 사용해야 합니다.

중첩된 객체 업데이트하기

다음과 같은 중첩된 객체 구조를 고려해 보겠습니다.

const [person, setPerson] = useState({
  name: 'Niki de Saint Phalle',
 

 artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
});

person.artwork.city를 업데이트하려면 변이로 수행하는 방법이 명확합니다.

person.artwork.city = 'New Delhi';

그러나 리액트에서는 상태를 불변으로 취급합니다! city를 변경하려면 먼저 이전 데이터를 포함한 새로운 artwork 객체를 생성한 다음, 새로운 artwork를 가리키는 새로운 person 객체를 생성해야 합니다.

const nextArtwork = { ...person.artwork, city: 'New Delhi' };
const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);

또는, 단일 함수 호출로 작성된 경우:

setPerson({
  ...person, // 기타 필드 복사
  artwork: { // 하지만 artwork를
    ...person.artwork, // 동일한 것으로 대체
    city: 'New Delhi' // 단지 New Delhi로!
  }
});

이렇게 조금 장황해질 수 있지만 대부분의 경우 잘 작동합니다.

let obj = {
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj3 = {
  name: 'Copycat',
  artwork: obj1
};

Immer를 사용하여 간결한 업데이트 로직 작성하기

상태가 깊게 중첩되어 있는 경우, 평면화(flattening)를 고려해볼 수 있습니다. 그러나 상태 구조를 변경하지 않고 원하는 경우 중첩된 스프레드를 위한 단축 방법을 선호할 수 있습니다. Immer는 편리하고 변이 문법을 사용하고 필요한 복사본을 생성하는 작업을 처리해주는 인기 있는 라이브러리입니다. Immer를 사용하면 작성하는 코드가 규칙을 어긴 것처럼 보이고 객체를 변이시키는 것처럼 보이지만, 이전 상태를 덮어쓰지 않습니다!

Immer를 사용해보려면 다음을 수행하세요:

1. npm install use-immer를 실행하여 의존성으로 Immer를 추가합니다.
2. 그런 다음 import { useState } from 'react'를 import { useImmer } from 'use-immer'로 바꿉니다.

다음은 위의 예제를 Immer로 변환한 것입니다:

이벤트 핸들러가 훨씬 간결해진 것을 알 수 있습니다. useState와 useImmer를 원하는대로 혼합하여 단일 컴포넌트에서 사용할 수 있습니다. Immer는 상태의 중첩 여부와 객체 복사가 반복적으로 발생하는 경우 업데이트 핸들러를 간결하게 유지하는 훌륭한 방법입니다.

요약

• 리액트에서는 모든 상태를 불변으로 취급합니다.
• 객체를 상태에 저장할 때, 객체를 변이시키면 렌더링이 트리거되지 않고 이전 렌더링 "스냅샷"의 상태가 변경됩니다.
• 객체를 변이시키는 대신 새로운 버전의 객체를 생성하고 상태를 해당 객체로 설정하여 재렌더링을 트리거해야 합니다.
• {...obj, something: 'newValue'} 객체 스프레드 구문을 사용하여 객체의 사본을 생성할 수 있습니다.
• 스프레드 구문은 "얕은(shallow)" 복사이며, 한 단계까지만 복사됩니다.
• 중첩된 객체를 업데이트하려면 해당 위치에서부터 모든 사본을 생성해야 합니다.
• 반복적인 복사 코드를 줄이려면 Immer를 사용하세요.