[리액트 파보기] (2) Javascript위에서 동작하는 react

리액트는 자바스크립트 위에서 동작하는 라이브러리이다.

리액트의 동작원리를 이해하기 위해서는

오브젝트와 오브젝트 불변성에 대한 이해가 필요하다.

 

원시형데이터(문자, 숫자)를 변수에 할당하면 데이터 자체가 변수에 할당되지만,

오브젝트를 변수에 할당하면 오브젝트의 주소, 즉 참조값이 할당된다.

 

동일한 참조값을 가지고 있는 두 변수가 있다고 가정한다면,

메모리는 2개이지만, 참조값은 1개이다.

 

이말인 즉슨, 참조값을 가진 오브젝트가 변수 중 어느 한곳에서 수정되면

같은 참조값을 가진 모든 오브젝트가 수정되는 것이다.

 

참조값 자체는 바꿀 수 없지만 오브젝트의 데이터는 수정이 가능한 것이다.

 

리액트에서 자주 사용되어지는 Spread Operator를 사용하면

오브젝트를 복제하여 완전히 새로운 오브젝트를 만들게 되는데

이 오브젝트 안의 아이템의 참조값 또한 복제하여 가져오게 된다.

 

이때, 원본 오브젝트에서 아이템의 데이터 수정을 하게 되면

새롭게 만든 오브젝트에 반영이 될까?

정답은 '반영이 된다' 이다.

 

그 이유는 새롭게 만들어진 오브젝트 껍데기 안의 아이템의

참조값은 원본과 동일하기 때문이다.

 

여기서 Spread Operater는 얕은 복제(Shallow-cloning)를 한다는 점을 알 수 있다.