<aside> 👨🏻🔬
리액트에서 메모이제이션은 애플리케이션의 성능을 크게 향상시킬 수 있는 중요한 기법입니다. 불필요한 리렌더링을 방지하고, 복잡한 계산이나 큰 데이터 세트를 다룰 때 이전 결과를 재사용함으로써 연산 비용을 줄일 수 있습니다. React.memo, useMemo, useCallback 등의 메모이제이션 도구를 이해하고 적절히 사용하면, 컴포넌트의 예측 가능성을 높이고 버그를 줄일 수 있으며, 특히 대규모 애플리케이션에서 확장성과 유지보수성을 향상시킬 수 있습니다. 이러한 기법을 숙달함으로써 개발자는 리액트의 내부 동작 원리를 더 깊이 이해하고 최적화된 코드를 작성할 수 있게 되어, 결과적으로 더 효율적이고 반응성 높은 사용자 경험을 제공할 수 있습니다.
</aside>
“렌더링을 하고 싶지 않아!”
“불필요한 연산을 하고 싶지 않아!”
동등 비교 및 동일성 - JavaScript | MDN
참조 동일성(Reference Equality)은 자바스크립트에서 두 값이 메모리 상에서 동일한 객체를 가리키고 있는지를 비교하는 개념입니다. 이는 특히 객체, 배열, 함수와 같은 참조 타입에서 중요합니다.
// 예제 1: 원시 타입 vs 참조 타입
const num1 = 5;
const num2 = 5;
console.log(num1 === num2); // true
const obj1 = { value: 5 };
const obj2 = { value: 5 };
console.log(obj1 === obj2); // false
// 예제 2: 객체의 얕은 복사와 깊은 복사
const original = { nested: { value: 5 } };
const shallowCopy = { ...original };
const deepCopy = JSON.parse(JSON.stringify(original));
console.log(original === shallowCopy); // false
console.log(original.nested === shallowCopy.nested); // true
console.log(original.nested === deepCopy.nested); // false
// 예제 3: 함수의 참조 동일성
const func1 = () => console.log("Hello");
const func2 = () => console.log("Hello");
const func3 = func1;
console.log(func1 === func2); // false
console.log(func1 === func3); // true
// 예제 4: 배열의 참조 동일성
const arr1 = [1, 2, 3];
const arr2 = [1, 2, 3];
const arr3 = arr1;
console.log(arr1 === arr2); // false
console.log(arr1 === arr3); // true
console.log(arr1[0] === arr2[0]); // true (원시 값 비교)