React 에서 배열에 값을 추가 할 때 concat을 쓰는 이유

배열에 값을 추가할때 push가 아닌 concat을 쓰는 이유를 설명해보고자 합니다.

 

객체(참조)는 불변성이 보장되지 않기 때문에 객체 같은경우에는 같은 주소를 가르키고 있기 때문에 업데이트를 하면 내용이 바뀌게 된다. 이때 불변성을 유지하기 위해서는 주소를 바꿔서 복제를 합니다.

 

push 와 concat 의 경우도 불변성의 역할에 따라 생각해 볼 수 있다. push 는 배열의 뒤에 붙이는 역할이지만 concat은 주소를 다른 곳에 내용을 새롭게 복제하는 것이죠

 

list 는 값만 바뀌지 주소는 그대로 즉. 내부 값은 바꼈어도 주소의 값은 그대로기 때문에 바뀐지 못알아 차립니다.

그래서 concat을 통해서 주소를 바꿔줘야만 바뀐지 확인이 된다. 그래서 concat 을 써야만이 useState가 바뀐것을 확인하고 리랜더링이 작동됩니다.

 

 

정리 ! push로 객체인 배열값을 바꾸는건 안의 내용물이 바뀌어도 주소가 그대로기 때문에 값이 바꼈는지 useState 가 인식을 하지 못합니다. 따라서 concat을 통해 아예 배열을 새로 만들어 주소값이 바뀌어 useState가 객체인 배열의 변화를 알아차리고 리랜더링을 실행합니다!!