[내일배움캠프 WIL] 9주차

Jaehyeon Ye·2023년 1월 2일
0

일주일을 돌아보며...

주말에 리액트 최적화하는 훅에 대해 좀 살펴봤다.
일단 지금은 클래스형이 아닌 함수형 컴포넌트로 훅스 이용해서 구현하고 있는데 클래스형으로는 아직 구현 안해봐서 잘 모르겠지만 일단 배운 것에서 기억나는 부분은,

리액트는 자신의 state가 업데이트 될 때마다 다시 렌더링된다. 그렇기 때문에 새로운 메모리 주소를 참조(변수의 초기화)하는데 useMemo나 useCallback 훅의 원리는 다시 랜더링 해도 메모리에 최초에 생성된 함수 주소를 메모이제이션(이미 계산해놓은 값을 메모리에 저장해놓고 필요할 때마다 꺼내서 재사용하는 것)하도록 하는 원리로 다시 계산을 하지 않고 이미 계산한 값을 재사용함으로써 코드의 효율성을 높이는 것 같다. 물론 이를 사용함으로써 렌더링 결과를 저장하기 위해 잡아두는 메모리가 있기에 굳이 사용하지 않아도 되는 곳에 사용하면 오히려 성능에 역효과가 있을 수 있어서 자주 변경되는 부분이나 복잡한 로직을 처리해야하는 필요한 곳에 사용하라는 것 같다.

그리고 리액트는 부모 컴포넌트가 랜더링되면 자식 컴포넌트도 랜더링된다고 한다.

React.memo 고차 컴포넌트(HOC)
어떤 컴포넌트를 인자로 받아서 새로운 최적화된 컴포넌트를 반환하는데, Prop check를 통해 prop 변화 있으면 렌더링 발생, prop 변화 없으면 기존의 이미 렌더링된 내용을 재사용한다. 근데 이 React.memo 만으로도 부모 컴포넌트의 변화에 따른 불필요한 자식 컴포넌트의 렌더링을 못 거르는 경우가 있기 때문에 함수값을 메모이제이션하냐 변수값을 메모이제이션하냐 따라서 useCallback과 useMemo를 함께 사용하는 것 같다.

콘솔값이 가끔 두개 뜨는데 하나는 희미한 색으로 VM 뭐시기의 콘솔값이 찍히는 경우가 있는데 이는 index.js에서 strict mode 끄면 VM console 안 뜬다고 한다. 근데 개발할 때는 켜놓는 게 좋다고 한다.

Javascript 객체는 원시타입이 아닌 메모리 주소가 변수에 저장되기 때문에 객체 값이 변화되지 않았어도 앱 함수 초기화되면 객체 담긴 변수도 초기화된다고 한다. 이부분을 배우면서 왜 리액트를 배우기 이전에 공부했던 원시 타입, 객체 타입을 공부해야했는지 이유를 깨닫게 되었다.

profile
FE Developer

0개의 댓글