상태 업데이트

  • 4분

React에서는 상태를 변경할 수 없으므로 상태 저장 개체의 값을 수정하려면 새 개체로 바꿉니다. 따라서 개체가 편집 중이어서 잘못된 상태에 있을 수 있는 전체 버그 클래스가 방지됩니다.

개체 복사

부울 값 또는 숫자와 같은 기본 형식은 참조 개체가 아닌 값 기반 개체입니다. 따라서 변경 시 자동으로 전체 개체가 대체됩니다.

문자열도 변경할 수 없으므로 유사하게 동작합니다. 새 값으로 바꾸어 문자열을 수정합니다.

let message = 'Hello, ';
message = message + 'world!';

개체로 작업할 때는 불변성을 보장하기 위해 개체의 새 인스턴스를 만들어야 합니다. 개체 복사본을 만드는 가장 일반적인 구문은 ‘spread 구문’(‘spread 연산자’라고도 함)입니다.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = { ...message };

개별 속성 수정

일반적으로 개체의 속성 하위 집합만 업데이트해야 합니다. 복사본을 만들고 각 속성을 수정하는 것은 번거로운 작업입니다.

위의 구문에서 중괄호({ })를 사용하여 새 JSON 개체를 만드는 것을 확인합니다. spread 연산자를 사용하여 새 개체의 초기 버전을 만들 수 있습니다. 이 연산자를 통해 특정 속성의 업데이트된 값을 지정할 수 있습니다. 예를 들어 color의 새 값이 있지만 텍스트를 유지하려는 경우 다음 코드를 사용할 수 있습니다.

let message = {
    text: 'Hello, world',
    color: 'red'
}

let messageCopy = {
    ...message,
    color: 'green'
};

여기서 text는 원래 값을 유지합니다. color 값은 녹색으로 업데이트됩니다.

// new object
{
    text: 'Hello, world',
    color: 'green'
}