[React] Array/Object로 구성된 State 변경

* CodingApple - React 강의

 

State 변경 함수의 특징

• React에서 State 변경 함수는 '기존 상태 == 신규 상태'면 변경해주지 않는다.

Array/Object의 특징

• Array/Object를 저장하는 변수의 경우 RAM에 저장된 위치를 가리키는 화살표만 저장된다.
• Array/Object를 변경해도 변수에 저장된 화살표는 변경되지 않는다.

Array/Object로 구성된 State의 변경 함수

• Array/Object로 구성된 State 변수를 변경하기 위해 일부 항목을 수정하더라도 State 변수에 저장된 화살표는 변경되지 않는다.
• 신규 상태 == 기존 상태 이므로 State update 함수는 동작하지 않는다.
• 변수를 업데이트 할 때에는 기존 변수를 유지하고 copy를 통해 업데이트 하는 것이 안정적

결론: State가 object/array면 Shallow copy를 만들어서 수정하는 것이 좋다.

let [array, setArray] = useState(['a', 'b', 'c']);
function updateArray() {
	let copiedArr = [...array];
    copiedArr[0] = 'z';
    setArray(copiedArr);
 }

 

`...` 의 의미: 괄호를 벗겨주세요