늘 겸손하게

목차 얕은 비교 깊은 비교 얕은 비교 자바스크립트에서 얕은 비교는 원시값을 비교할 경우 값을 비교하나, 배열 객체 등 객체를 비교할때는 레퍼런스, 즉 참조값을 비교합니다. 그래서 자바스크립트에서는 같은 값을 가진 객체라도 얕은 비교를 하면 다르다고 판단할 수 있습니다. const str1 = "hello" const str2 = "hello" if (str1 === str2) { console.log("string same") // string name } const obj1 = { number : 10 } const obj2 = { number : 10 } if (obj1 == obj2) { console.log("object same") // 출력 안됨 } 깊은 비교 객체를 비교할때 레퍼런스(주소)만..

목차 최적화 방법 React.memo와 메모이제이션 실제 사용 React.memo를 지양해야 하는 상황 결론 최적화 방법 React 앱을 최적화하는 데 사용하는 방법은 크게 네 가지가 있다. 첫 번째가 React.memo 두 번째로, useCallback 세 번째로, useMemo 네 번째로, 얕은 비교 (shallow compare) React.memo, useMemo는 메모이제이션을 활용한 최적화 방법이다. React.memo와 메모이제이션 메모이제이션이란 계산 결과를 메모리에 저장해 두고, 같은 연산에 대한 계산 결과를 요구할 때 재계산하지 않고 메모리에 저장된 값을 불러와 사용하는 방식을 말한다. React.memo로 감싸진 컴포넌트는 같은 props가 전달되면 리렌더링 없이 메모리에 저장된 컴포..

React Profiler React Developer Tools를 설치하고 react 앱을 실행시킨 뒤, 개발자 도구를 켜면 React Components와 React Profiler가 보인다. React Profiler를 통해 컴포넌트 렌더링에 걸린 시간을 알 수 있다. React Profiler 사용하기 React Profiler를 켜면 아래와 같은 화면이 뜨는데 왼쪽에 rec 버튼을 클릭하면 기록이 시작되고, 리액트 앱에서 렌더링이 발생하도록 앱과 상호작용해보자. 상단에 원이 rec 시작 버튼이고 클릭하면 profilling이 시작된다. profilling이 시작되면 앱과 상호작용하고 다시 rec 버튼을 클릭해보면 렌더링하는데 소요된 시간이 ms 단위로 나타난다. 오른쪽 화면에 보면 Durati..

성능 최적화 필요한 이유 당연하게도 사용자 입장에서 가볍고 빠른 앱을 사용하기가 더 편리하다. React 앱 또한 성능 최적화를 위한 기능들이 존재한다. 개발한 프로젝트를 최적화하여 더 빠르고 가벼운 앱으로 업그레이드 해보자. 프로젝트 최적화를 위해선 성능 테스트를 바로바로 가능한 확장 프로그램이 필요하다. 무료 확장 프로그램인 React Developer Tools를 브라우저에 설치하자. 확장 프로그램 설치 구글에 'React Developer Tools'를 입력하면 chrome 웹 스트어에서 다운로드 받을 수 있다.