[React] state 변경 함수 동작 원리, Array 값 변경

1. state 변경 함수 동작 원리

 

좌측 처럼 let copy = title로 하면 수정이 이루어지지 않는다.

state 변경함수는 사용시 [기존 state] === [신규 state]의 검사를 우선적으로 수행

이 값이 true를 반환하게 된다면, state 변경을 하지 않는다.

 

title[0]의 값을 'newTitle'로 바꾼다 하더라도 위 조건에 true를 반환해 변경이 이루어지지 않는데

이는 변수가 배열의 주소를 저장하고 있기 때문이다.

copy와 title이 같은 주소를 가리키고 있으므로 항상 같은 값을 가지게 된다.

 

JS의 spread operator(...)을 이용하면 배열의 괄호를 벗겨주는 느낌의 동작을 하게 된다.

...[1,2,3]은 1, 2, 3이 남게 되고, 오른쪽 코드에서의 [...title]과 같이 쓰게 된다면

title 배열의 괄호를 벗겨 ['Title1', 'Title2', 'Title3']의 값이 되고, 주소가 아닌 해당 값을 그대로

copy에 저장해 copy와 title은 서로 다른 주소를 가리키게 된다.

 

이는 array, object 자료형을 복사할 때 자주 사용한다.