react 공식문서 학습- Updating Objects in State

🎈 객체 state 업데이트

 

state는 객체를 포함해서 어떤 종류의 javascript 값이든 저장할 수 있습니다.

하지만 react state에 있는 객체를 직접 변이해서는 안됩니다. ⇒ 객체의 불변성

대신 객체를 업데이트하려면 새 객체를 생성하고 (혹은 기존 객체의 복사본을 만들고 = spread 연산자) 해당 복사본을 사용하도록 state를 설정해야 합니다.

• react state에서 객체를 올바르게 업데이트하는 방법
• 중첩된 객체를 변이하지 않고 업데이트하는 방법
• 불변성이란 무엇이며, 불변성을 깨뜨리지 않는 방법
• Immer로 객체 복사를 덜 반복적으로 만드는 방법

🎈 변이란 무엇인가?

javascript 값은 불변, 변이할 수 없거나 읽기전용→ 다시 렌더링을 일으켜서 값을 변화가능

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

setX(5);

X state가 0에서 5로 변경되었지만 숫자 0 자체는 변경되지 않았습니다. javascript에서는 숫자, 문자열, 불리언과 같은 빌트인 원시 자료형 값을 변경할 수 없습니다.

원시 타입 (Primitive Type)

원시 타입은 모두 하나의 값을 담고 있습니다.

• 문자(string)
• 숫자(number)
• bigint
• 불리언(boolean)
• null
• undefined
• 심볼(symbol) => ES6부터 추가된 타입

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

객체 자체의 내용을 변경하는 것은 가능합니다. → 변이

숫자, 불리언, 문자열과 같이 불변하는 것처럼 취급해야 함, 직접 변이하는 대신 교체해야 합니다.

 

🎈 state를 읽기 전용으로 취급하세요

다시 말해 state에 넣는 모든 javascript 객체를 읽기 전용으로 취급해야 합니다.

onPointerMove={e => {

position.x = e.clientX;

position.y = e.clientY;

}}

 

이전 렌더링에서 position에 할당된 객체를 수정합니다. 하지만 state 설정자 함수를 사용하지 않으면 react는 객체가 변이되었다는 사실을 알지 못합니다. 그래서 react는 아무 반응도 하지 않습니다.

state 변이는 경우에 따라 작동할 수 있지만 권장하지 않습니다. 렌더링에서 접근할 수 있는 state값은 읽기전용으로 취급해야 합니다.

onPointerMove={e => {

setPosition({

x: e.clientX,

y: e.clientY

});

}}

 

새 객체를 생성하고state 설정자 함수에 전달 → 리렌더링 !

setPosition으로 react에 1. position을 새 객체로 바꿈, 2. 컴포넌트 다시 렌더링 시킴

 

🎈 전개구문을 사용하여 객체 복사하기

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

import { useState } from 'react';

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

function handleFirstNameChange(e) { person.firstName = e.target.value; }

function handleLastNameChange(e) { person.lastName = e.target.value; }

function handleEmailChange(e) { person.email = e.target.value; }

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

 

이 줄은 이전 렌더링 시의 state를 변이합니다

person.firstName = e.target.value;

 

원하는 동작을 얻을 수 있는 가장 안정적인 방법은 새 객채를 생성하고 이를 setPerson에 전달하는 것입니다. 하지만 여기서는 필드 중 하나만 변경되었으므로 기존 데이터도 복사하고 싶습니다 !

setPerson({

firstName: e.target.value, // New first name from the input

// input에서 받아온 새로운 first name

lastName: person.lastName,

email: person.email

});

 

모든 속성을 개별적으로 복사할 필요가 없도록 …객체 전개 구문을 사용할 수 있습니다.

setPerson({

...person, // Copy the old fields

// 이전 필드를 복사합니다.

firstName: e.target.value // But override this one

// 단, first name만 덮어씌웁니다.

});

 

각 입력 필드에 대해 별도의 state 변수를 선언하지 않은 것을 주목하세요. 큰 양식의 경우 올바르게 업데이트하기만 하면 모든 데이터를 객체에 그룹화하여 보관하는 것이 매우 편리합니다.

 

function handleFirstNameChange(e) { setPerson({ ...person, firstName: e.target.value }); }

return ( <> <label> First name: <input value={person.firstName} onChange={handleFirstNameChange} /> </label>

 

…전개 구문은 얕은 구문으로 한 단계 깊이만 복사한다는 점에 유의하세요. 속도는 빠르지만 중첩된 프로퍼티를 업데이트하려면 두번 이상 사용해야 한다는 뜻입니다.

 

🎈 중첩된 객체 업데이트하기

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

 

하지만 react에서는 state를 불변으로 취급합니다. city를 변경하려면 먼저 새 artwork 객체를 생성한 다음 새 artwork를 가리키는 새로운 사람 객체를 생성해야 합니다.

const nextArtwork = { ...person.artwork, city: 'New Delhi' };

const nextPerson = { ...person, artwork: nextArtwork };

setPerson(nextPerson);

 

또는 단일 함수 호출로 작성가능

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 필드를 복사합니다!

}

});

 

🎈 Immer로 간결한 업데이트 로직 작성

state가 깊게 중첩된 경우 그것을 평평하게 만드는 것을 고려할 수 있습니다. 하지만 state 구조를 변경하고 싶지 않다면 중첩된 전개 구문보다 더 간편한 방법을 선호할 수 있습니다. Immer는 변이 구문을 사용하여 작성하더라도 자동으로 사본을 생성해주는 편리한 인기 라이브러리 입니다. Immer를 사용하면 작성하는 코드가 규칙을 깨고 객체를 변이하는 것처럼 보입니다.

updatePerson(draft => {

draft.artwork.city = 'Lagos';

});

 

하지만 일반 변이와 달리 이전 state를 덮어쓰지 않습니다

Immer에서 제공하는 draft는 프록시하는 특수한 유형의 객체로 사용자가 수행하는 작업을 기록합니다. 그렇기 때문에 원하는 만큼 자유롭게 수정할 수 있습니다 Immer는 내부적으로 draft 의 어떤 부분이 변경되었는지 파악하고 편집 내용이 포함된 완전히 새로운 객체를 생성합니다.

 

🎈 react에서 state 변이를 권장하지 않는 이유는?

1. 디버깅: 렌더링 사이에 state가 어떻게 변경되었는지 명확하게 확인을 위해서
2. 최적화: 변경이 있었는지 확인하는 것이 매우 빠름
3. 새로운 기능: 과거 버전 state를 변이하는 경우 새로운 기능을 사용하지 못할 수 있음
4. 요구사항 변경 : 재사용가능
5. 더 간단한 구현: 변이에 의존하지 않기 때문에 특별한 작업이 필요가 없음