React 오브젝트, 배열 형태의 State 변경하기

React에서 Object, array 형태로 만들어진 State 변경하는 방법에는 여러가지가 있다.

 

그중 가장 간단한 것은 원본 list 값을 변경하고 그 list를 다시 변경함수에 넣어주는 것이다.

 

let [리스트, 변경함수] = useState(['123', '456', '789']);

리스트[0] = '100'
변경함수(리스트);

근데 이렇게 하면 아마 변경이 안될거임

왜냐하면 React에서 기존 State랑 신규 State가 같으면 변경을 따로 안해주는데 저렇게 하면 리스트라는 변수가 가르키는 포인터 값이 같기 때문에 변경을 안해줌

 

그래서 아래와 같은 방법으로 바꾸는게 정석이다.

let [리스트, 변경함수] = useState(['123', '456', '789']);

let 복사본 = [...리스트];
복사본[0] = '100';
변경함수(복사본);

여기서 [...리스트]에서 점 세개는 뭐냐면 spread operator라고 하는 리스트의 괄호를 벗겨주는 문법인데

괄호를 벗기고 그 바깥에 다시 괄호를 씌움으로써 새로운 리스트를 만들어서

변수가 가르키는 포인터 값을 변경해주는 것이다.