setState
- state의 내용을 변경하는 함수
- 변경 시 변경 전 state와 변경될 state를 비교하고, 같으면 동작하지 않는다.
Array/Object
let [arr, setArr] = [1, 2, 3];
- arr은 [1, 2, 3] 배열의 위치를 가리킨다. (c의 포인터처럼)
- arr의 내용을 바꾸려면? setArr( 변경될 state )
- 만약 arr의 첫 번째 값인 1을 5로 바꾸고 싶다면?
Array/Object의 값 변경
- Array/Object는 값 변경시 원본은 유지하는 것이 좋다. 따라서 변경시 copy본을 만들고 새 state를 구성한다.
let copy = arr;
copy[0] = 5;
setArr(copy);
// => 변경되지 않는다.
위와 같이 코드를 작성하면 변경되지 않는다. arr은 [1, 2, 3]의 위치만을 가리키기 때문 (call by reference).
따라서 값만 복사해야 하는 경우 아래와 같이 작성한다. (call by value)
let copy = [...arr];
copy[0] = 5;
setArr(copy);
[...arr]로 할당하면 copy는 새로운 주소를 가리키고 해당 주소에 arr이 가리키는 array의 내용을 복사한다.