계속 헷갈려왔던 React.memo와 useMemo를 과제에 쓰려고 조사하다가 드디어 차이점을 이해했다. React.memo는 '컴포넌트'를 최적화할 때 쓰이고(export default React.memo(컴포넌트); 형태로 사용됨) useMemo는 컴포넌트도 함수도 아닌 '변수'를 최적화할 때 쓰인다.

useCallback은 '함수'를 최적화할 때 쓰이는데, 이 useCallback이 도는 게 생각보다 무거워서 아무 함수에나 막 쓰면 안 된다고 들었다. 하지만 언제 쓰이는지 매번 헷갈림

🎳 참고한 링크: useCallback, React.memo

useCallback

useCallback은 함수를 의존성 배열이 변경될 때까지 저장해놓고 재사용할 수 있게 해 줍니다.

예를 들어 리액트 컴포넌트 안에 함수가 선언되어 있으면 이 함수는 해당 컴포넌트가 리렌더링될 때마다 새롭게 생성됩니다.

하지만 useCallback을 사용하면 컴포넌트가 리렌더링 되더라도 그 함수가 의존하는 값(deps 배열)들이 바뀌지 않는 한 기존 함수를 재사용하게 됩니다.


-- 완전 꿀 설명. 한 번에 이해됐다. (적용은 다른 얘기지만 ㅠㅠ)

-- 이후 '침실/주방 조명 예제'를 통해 React.memo에 대해서도 추가 설명한다. (useCallback과 조합해서 쓰는 예시 - 링크 참고)

👔 참고한 링크: React.memo

React.memo

컴포넌트를 React.memo()로 감싸면, 리액트는 컴포넌트를 렌더링한 후 결과를 기록(memoizing)한다.
이후 렌더링이 일어날 때 props가 같다면, 기록된 내용을 재사용한다.

언제 사용?

• 순수 함수 컴포넌트일 때
• 자주 렌더링 될 때
• 같은 prop으로 리렌더링 될 때
• 컴포넌트가 클 때

컴포넌트가 무겁지 않고, 자주 다른 props를 받아 렌더링한다면 React.memo로 감싸는게 불필요하다.

-- React.memo 또한 무조건 쓰면 안 되기 때문에 적절한 컴포넌트를 고민해서 써야 한다. 개발은 근거 들기 나름이니까 내 나름대로 이유를 들 수 있을 만한 Button과 Input 컴포넌트에 React.memo를 적용했다. props가 많지만 변경될 props가 거의 없다는 이유인데 맞는지는 모르겠다. 😅