[임시] 리액트 컴포넌트의 렌더링 조건

리액트 컴퍼넌트의 렌더링이 일어나는 이유는 많은 이유가 있습니다.

많은 이유가 있지만 오늘은 props의 동등 비교에 따라 다를 경우 렌더링이 되는 걸 말하려고 합니다.

리액트에서 변수나 함수의 메모이제이션과 렌더링 같은 건 자바스크립트의 동등 비교를 기반합니다.

이 props의 동등 비교는 객체의 얕은 비교를 기반으로 이뤄집니다.

 

우선 자바스크립트의 동등비교에 대해서 알아보기 전에 

자바스크립트의 값을 저장하는 방식에 대해서 알아봅시다.

 

값을 저장하는 방식

저장하는 방식은 call by sharing, call by reference 두가지가 있습니다.

 

call by sharing 이란?

• 자바스크립트의 기본형 데이터 타입입니다 ( 예: 숫자, 문자열, 불리언, null, undefined, symbol )
• 데이터는 값 자체가 변수에 저장됩니다.
• 함수에 기본형 데이터를 인자로 전달할 때, 그 값의 복사본이 생성되어 전달됩니다. 따라서 함수 내에서 이 값을 변경해도 원본 변수에는 영향을 미치지 않습니다.

call by reference 란?

• 객체형 데이터(예: 객체, 배열, 함수)의 경우, 변수에는 객체의 참조(메모리 주소)가 저장됩니다.
• 함수에 객체를 인자로 전달할 때, 객체의 참조가 복사되어 전달됩니다. 이는 Call by Reference와 유사해 보이지만, 차이점은 전달된 참조를 통해 원본 객체를 변경할 수 있지만, 참조 자체(즉, 변수가 가리키는 메모리 주소)를 변경할 수는 없다는 점입니다.
• 함수 내에서 새 객체를 할당하면 원본 참조에는 영향을 미치지 않지만, 객체의 속성을 변경하면 원본 객체에도 영향을 줍니다.

 

자바스크립트의 비교 방법

== , ===

Object.is

 

리액트에서 동등 비교