최윤지 2024-03-04

docs/Yoonji23/dil/2024-03-04.md

@@ -0,0 +1,22 @@
+1주차-1일 독서 상황
+
+리액트 개발을 위해 꼭 알아야할 자바스크립트
+
+[자바스크립트의 동등비교]
+
+1. 리액트 컴포넌트의 렌더링이 일어나는 이유 중 하나가 props의 동등비교에 따른 결과이다.
+
+   : 이 동등비교는 객체의 얕은 비교를 기반으로 일어나기 때문에 얕은 비교가 리액트에서 어떻게 작동하는지를 이해하면, 렌더링 최적화에 대해 이해할 수 있다.
+   동등비교는 객체의 얕은 비교를 기반으로 일어난다.
+
+2. 원사타입과 객체 타입의 가장 큰 차이점은 값을 저장하는 방식의 차이.
+
+- 원시타입: 불변 형태의 값이 저장된다. 따라서 값을 복사할때 값을 전달한다.
+- 객체타입: 객체는 변경 가능한 형태로 저장된다. 따라서 값을 복사할때 변경이 이루어 질 수 있으므로 값을 전달하지 않고, 참조를 전달한다.
+
+3. 리액트에는 내부적으로 만든 함수(shallowEqual)를 이용하여 얕은비교를 기반으로 해도 객체의 1depth까지는 비교가 가능하다.
+
+[총정리]
+
+객체의 1depth까지는 shallowEqual를 통해 비교가 가능하므로 값이 바뀌지 않았다면 비교를 통해 렌더링이 되지 않지만, props에 또 다른 객체를 넘겨준다면 2depth의 비교는 불가하므로 개발자의 의도와 다르게 리액트 렌더링이 예상치 못하게 발생할 수 있다.
+리액트 렌더링이 일어나는 이유 중 하나인 동등비교에 대해서 이해했으니, 렌더링 방지와 렌더링 최적화 및 의존성 배열의 비교 등을 올바르게 작동시키기 위한 개념을 이해하는데 수월할 것이다!