choijming21 님의 블로그

useMemo와 React.memo 그리고 useCallback에 대해 공부한 것을 정리해보겠습니다! 먼저, Memoization이란! 이미 계산해본 연산 결과를 기억해두었다가 동일한 연산을 해야할 때 다시 연산하지 않고 기억해두었던 데이터를 반환시키는 방법입니다. 마치 시험을 볼 때 이미 풀어본 문제는 다시 풀어보지 않아도 답을 알고 있는 것과 유사합니다.   ✅ useMemo란? useMemo는 특정 값이나 참조가 변경될 때만 재계산을 수행하고 그렇지 않으면 이전에 계산된 결과를 재사용합니다.복잡한 계산이나 처리가 필요한 경우렌더링 성능 최적화가 필요한 경우 기본적으로 React는 부모 component로 부터 받는 state, props가 변동될 경우 자식 component도 리렌더링됩니다. 하지만..

제가 팀프로젝트에서 이번에 적용해야 할 것은 유저가 버튼(전체 스터디 보기)을 클릭했을 때, 자동으로 전체 스터디 컴포넌트로 스크롤 되는 동작을 구현해야 합니다:) 그럼 먼저 useRef에 대해 알아보도록 하겠습니다.  1. useRef란?React 공식 홈페이지에서는 ".current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다." 라고 설명하고 있습니다.쉽게 말하자면, useRef의 Ref는 reference(참조)의 줄임말로 저장공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook입니다. 주요한 특징은 특정한 DOM 요소에 접근이 가능하며, 불필요한 재렌더링을 하지 않는다..