개발/React 학습

Array, Object State

RainyJune 2023. 2. 28. 22:47

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의 내용을 복사한다.

'개발 > React 학습' 카테고리의 다른 글

동적 UI  (0) 2023.03.02
Component  (0) 2023.02.28
onClick, setState  (0) 2023.02.28
State  (0) 2023.02.23
JSX 문법  (0) 2023.02.23