Updating Objects in State객체 state 업데이트

What’s a mutation? 변이란 무엇인가요?

You can store any kind of JavaScript value in state. 어떤 종류의 JavaScript 값이든 state에 저장할 수 있습니다.

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

So far you’ve been working with numbers, strings, and booleans. These kinds of JavaScript values are “immutable”, meaning unchangeable or “read-only”. You can trigger a re-render to replace a value: 지금까지 숫자, 문자열, 불리언값으로 작업해 보았습니다. 이러한 종류의 JavaScript 값은 “불변”, 즉,변이할 수 없거나 “읽기 전용”입니다. 다시 렌더링을 촉발하여 값을 바꿀 수 있습니다:

setX(5);

The x state changed from 0 to 5, but the number 0 itself did not change. It’s not possible to make any changes to the built-in primitive values like numbers, strings, and booleans in JavaScript. x state가 0에서 5로 변경 되었지만 숫자 0 자체는 변경되지 않았습니다. JavaScript에서는 숫자, 문자열, 불리언과 같은 빌트인 원시 자료형 값을 변경할 수 없습니다.

Now consider an object in state: 객체 state를 살펴봅시다:

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

Technically, it is possible to change the contents of the object itself. This is called a mutation: 기술적으로 객체 자체의 내용을 변경하는 것은 가능합니다. 이를 변이(mutation)라고 합니다:

position.x = 5;

However, although objects in React state are technically mutable, you should treat them as if they were immutable—like numbers, booleans, and strings. Instead of mutating them, you should always replace them. React state의 객체는 기술적으로는 변이할 수 있지만, 숫자, 불리언(boolean), 문자열과 같이 불변하는 것처럼 취급해야 합니다. 객체를 직접 변이하는 대신, 항상 교체해야 합니다.

Treat state as read-only state를 읽기 전용으로 취급하세요

In other words, you should treat any JavaScript object that you put into state as read-only. 다시 말해 state에 넣는 모든 JavaScript 객체를 읽기 전용으로 취급해야 합니다.

This example holds an object in state to represent the current pointer position. The red dot is supposed to move when you touch or move the cursor over the preview area. But the dot stays in the initial position: 이 예제에서는 현재 포인터 위치를 나타내는 state 객체가 있습니다. 미리 보기 영역 위로 커서를 터치하거나 이동하면 빨간색 점이 움직여야 합니다. 그러나 점은 초기 위치에 유지되고 있습니다:

The problem is with this bit of code. 문제는 아래 코드에 있습니다.

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

This code modifies the object assigned to position from the previous render. But without using the state setting function, React has no idea that object has changed. So React does not do anything in response. It’s like trying to change the order after you’ve already eaten the meal. While mutating state can work in some cases, we don’t recommend it. You should treat the state value you have access to in a render as read-only. 이 코드는 이전 렌더링에서 position에 할당된 객체를 수정합니다. 하지만 state 설정자 함수를 사용하지 않으면 React는 객체가 변이되었다는 사실을 알지 못합니다. 그래서 React는 아무 반응도 하지 않습니다. 이미 음식을 다 먹은 후에 주문을 바꾸려고 하는 것과 같습니다. state 변이는 경우에 따라 작동할 수 있지만 권장하지 않습니다. 렌더링에서 접근할 수 있는 state 값은 읽기 전용으로 취급해야 합니다.

To actually trigger a re-render in this case, create a new object and pass it to the state setting function: 이 경우 실제로 리렌더링을 촉발하려면 새 객체를 생성하고 state 설정자 함수에 전달하세요:

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

With setPosition, you’re telling React: setPosition으로 React에 다음을 지시합니다:

• Replace position with this new object
• And render this component again

Notice how the red dot now follows your pointer when you touch or hover over the preview area: 이제 미리보기 영역을 터치하거나 마우스를 가져가면 빨간색 점이 포인터를 따라다니는 것을 확인할 수 있습니다:

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
});

Copying objects with the spread syntax 전개 구문을 사용하여 객체 복사하기

In the previous example, the position object is always created fresh from the current cursor position. But often, you will want to include existing data as a part of the new object you’re creating. For example, you may want to update only one field in a form, but keep the previous values for all other fields. 이전 예제에서 position 객체는 항상 현재 커서 위치에서 새로 만들어졌습니다. 그러나 종종 기존 데이터를 새로 만드는 객체의 일부로 포함시키고 싶을 때가 있습니다. 예를 들어, form에 있는 하나의 필드만 업데이트하고 다른 모든 필드는 이전 값을 유지하고 싶을 수 있습니다.

These input fields don’t work because the onChange handlers mutate the state: 이러한 입력 필드는 onChange 핸들러가 state를 변이하기 때문에 작동하지 않습니다:

For example, this line mutates the state from a past render: 예를 들어, 이 줄은 이전 렌더링시의 state를 변이합니다:

person.firstName = e.target.value;

The reliable way to get the behavior you’re looking for is to create a new object and pass it to setPerson. But here, you want to also copy the existing data into it because only one of the fields has changed: 원하는 동작을 얻을 수 있는 가장 안정적인 방법은 새 객체를 생성하고 이를 setPerson에 전달하는 것입니다. 하지만 여기서는 필드 중 하나만 변경되었으므로 기존 데이터도 복사하고 싶습니다:

setPerson({
  firstName: e.target.value, // New first name from the input
                             // input에서 받아온 새로운 first name 
  lastName: person.lastName,
  email: person.email
});

You can use the ... object spread syntax so that you don’t need to copy every property separately. 모든 속성을 개별적으로 복사할 필요가 없도록 ... 객체 전개 구문을 사용할 수 있습니다.

setPerson({
  ...person, // Copy the old fields
             // 이전 필드를 복사합니다.
  firstName: e.target.value // But override this one
                            // 단, first name만 덮어씌웁니다. 
});

Now the form works! 이제 폼이 동작합니다!

Notice how you didn’t declare a separate state variable for each input field. For large forms, keeping all data grouped in an object is very convenient—as long as you update it correctly! 각 입력 필드에 대해 별도의 state 변수를 선언하지 않은 것을 주목하세요. 큰 양식의 경우 올바르게 업데이트하기만 하면 모든 데이터를 객체에 그룹화하여 보관하는 것이 매우 편리합니다!

Note that the ... spread syntax is “shallow”—it only copies things one level deep. This makes it fast, but it also means that if you want to update a nested property, you’ll have to use it more than once. ... 전개 구문은 “얕은” 구문으로, 한 단계 깊이만 복사한다는 점에 유의하세요. 속도는 빠르지만 중첩된 프로퍼티를 업데이트하려면 두 번 이상 사용해야 한다는 뜻이기도 합니다.

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

  function handleChange(e) {
    setPerson({
      ...person,
      [e.target.name]: e.target.value
    });
  }

  return (
    <>
      <label>
        First name:
        <input
          name="firstName"
          value={person.firstName}
          onChange={handleChange}
        />
      </label>
      <label>
        Last name:
        <input
          name="lastName"
          value={person.lastName}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          name="email"
          value={person.email}
          onChange={handleChange}
        />
      </label>
      <p>
        {person.firstName}{' '}
        {person.lastName}{' '}
        ({person.email})
      </p>
    </>
  );
}

Updating a nested object 중첩된 객체 업데이트하기

Consider a nested object structure like this: 다음과 같은 중첩된 객체 구조를 생각해 보세요

const [person, setPerson] = useState({
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
});

If you wanted to update person.artwork.city, it’s clear how to do it with mutation: person.artwork.city를 업데이트하려면 변이를 사용하여 업데이트하는 방법이 명확합니다:

person.artwork.city = 'New Delhi';

But in React, you treat state as immutable! In order to change city, you would first need to produce the new artwork object (pre-populated with data from the previous one), and then produce the new person object which points at the new artwork: 하지만 React에서는 state를 불변으로 취급합니다! city를 변경하려면 먼저 새 artwork 객체(이전 artwork의 데이터로 미리 채워진)를 생성한 다음 새 artwork을 가리키는 새로운 사람 객체를 생성해야 합니다:

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

Or, written as a single function call: 또는 단일 함수 호출로 작성할 수도 있습니다:

setPerson({
  ...person, // Copy other fields
  artwork: { // but replace the artwork
             // 대체할 artwork를 제외한 다른 필드를 복사합니다.
    ...person.artwork, // with the same one
    city: 'New Delhi' // but in New Delhi!
                      // New Delhi'는 덮어씌운 채로 나머지 artwork 필드를 복사합니다!
  }
});

This gets a bit wordy, but it works fine for many cases: 약간 장황해지긴 하지만 대부분의 경우 잘 작동합니다:

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
};

Write concise update logic with Immer Immer로 간결한 업데이트 로직 작성

If your state is deeply nested, you might want to consider flattening it. But, if you don’t want to change your state structure, you might prefer a shortcut to nested spreads. Immer is a popular library that lets you write using the convenient but mutating syntax and takes care of producing the copies for you. With Immer, the code you write looks like you are “breaking the rules” and mutating an object: state가 깊게 중첩된 경우 그것을 평평하게 만드는 것을 고려할 수 있습니다. 하지만 state 구조를 변경하고 싶지 않다면 중첩된 전개 구문보다 더 간편한 방법을 선호할 수 있습니다. Immer는 변이 구문을 사용하여 작성하더라도 자동으로 사본을 생성해주는 편리한 인기 라이브러리입니다. Immer를 사용하면 작성하는 코드가 “규칙을 깨고” 객체를 변이하는 것처럼 보입니다:

updatePerson(draft => {
  draft.artwork.city = 'Lagos';
});

But unlike a regular mutation, it doesn’t overwrite the past state! 하지만 일반 변이와 달리 이전 state를 덮어쓰지 않습니다!

To try Immer: Immer를 사용해 보려면:

1. Run npm install use-immer to add Immer as a dependency
2. Then replace import { useState } from 'react' with import { useImmer } from 'use-immer'

Here is the above example converted to Immer: 다음은 위의 예제를 Immer로 변환한 것입니다:

Notice how much more concise the event handlers have become. You can mix and match useState and useImmer in a single component as much as you like. Immer is a great way to keep the update handlers concise, especially if there’s nesting in your state, and copying objects leads to repetitive code. 이벤트 핸들러가 얼마나 간결해졌는지 주목하세요. 단일 컴포넌트에서 useState와 useImmer를 원하는 만큼 맞춰 사용할 수 있습니다. 특히 state에 중첩이 있고 객체를 복사하면 코드가 반복되는 경우 업데이트 핸들러를 간결하게 유지하는 데 Immer는 좋은 방법입니다.