[React 기초] useState array update

리액트에서 useState 함수를 사용하면 value와 set 함수 두개를 얻을 수 있다.

 

const [value, setValue] = useState('초기화값');

 

이때 setValue를 통해 값을 변경하면 value값은 리렌더링 되어 UI에 표시된다.

 

근데 이 value에 들어간 값이 int나 string 같은 값이 아니라 오브젝트 혹은 array일 경우에는 그 값을 변경하고 set함수를 호출해도 UI에 값이 변경되지 않는다.

 

const [array, setArray] = useState(['a', 'b']);

array.push('c');

setArray(array); // 여전히 화면에는 a와 b밖에 보이지 않는다.

 

React는 useState로 만들어진 변수들을 계속 감시를 하고 변경을 감지하면 해당 변수가 사용된 부분을 다시 렌더링하여 화면에 해당 부분을 리프레시 한다. 

그런데 Object나 array의 경우 각 인스턴스의 주소 값을 가지고 있고 내부의 내용이 변경된다해도 똑같은 주소값을 가르키고 있기 때문에 렌더링이 일어나지 않는다.

 

따라서 array의 경우 값의 변경이 일어난 경우 이를 반영하기 위해서는 해당 array를 복제해서 set함수에 넣어주어야 한다. 간단하게 값을 복사하기 위해서는 ES6에 ... 문법을 사용하면 된다.

 

const [array, setArray] = useState(['a', 'b']);

array.push('c');

setArray([...array]);

 

이러면 array는 새로운 주소값을 가진 복제 변수로 값이 덮어씌워 지기 때문에 렌더링이 일어나고 정상적으로 UI 업데이트가 발생한다.