Tistory
React.memo 완벽 해부: 언제 쓸모 있고 언제 쓸모없는가
React.memo의 동작 원리를 깊이 분석하고, 실제로 성능 최적화 효과가 있는 상황과 오히려 오버헤드가 되는 상황을 구분하는 아티클입니다. memo는 만능 최적화 도구가 아니라 props 비교 비용과 리렌더링 비용의 trade-off를 고려해 선택적으로 사용해야 함을 설명합니다.
핵심 요약
이 아티클은 React 컴포넌트와 렌더링 흐름를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. React.memo의 동작 원리를 깊이 분석하고, 실제로 성능 최적화 효과가 있는 상황과 오히려 오버헤드가 되는 상황을 구분하는 아티클입니다. memo는 만능 최적화 도구가 아니라 props 비교 비용과 리렌더링 비용의 trade-off를 고려해 선택적으로 사용해야 함을 설명합니다. 무분별한 React.memo 사용은 코드 복잡도를 높이고 실제 성능 개선에 도움이 되지 않을 수 있어 정확한 이해가 중요합니다.
이 아티클은 React 컴포넌트와 렌더링 흐름를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
React 컴포넌트와 렌더링 흐름를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. React.memo는 컴포넌트를 메모이제이션하여 props가 변경되지 않으면 이전 렌더링 결과를 재사용하는 HOC이다 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
React
React.memo는 컴포넌트를 메모이제이션하여 props가 변경되지 않으면 이전 렌더링 결과를 재사용하는 HOC이다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
React를 개념으로만 기억하고 맥락 없이 적용하면 React.memo는 컴포넌트를 메모이제이션하여 props가 변경되지 않으면 이전 렌더링 결과를 재사용하는 HOC이다 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
기본 비교는 얕은 비교
기본 비교는 얕은 비교(shallow comparison)이므로 객체나 배열 props는 참조가 바뀌면 리렌더링이 발생한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
기본 비교는 얕은 비교를 개념으로만 기억하고 맥락 없이 적용하면 기본 비교는 얕은 비교(shallow comparison)이므로 객체나 배열 props는 참조가 바뀌면 리렌더링이 발생한다 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
부모 컴포넌트에서 인라인으로 생성한 객체/함수를 p
부모 컴포넌트에서 인라인으로 생성한 객체/함수를 props로 전달하면 매 렌더링마다 새로운 참조가 생성되어 memo가 무력화된다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
부모 컴포넌트에서 인라인으로 생성한 객체/함수를 p를 개념으로만 기억하고 맥락 없이 적용하면 부모 컴포넌트에서 인라인으로 생성한 객체/함수를 props로 전달하면 매 렌더링마다 새로운 참조가 생성되어 memo가 무력화된다 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
읽는 순서
- 1이론
"React.memo 완벽 해부: 언제 쓸모 있고 언제 쓸모없는가"의 멘탈 모델과 요약을 먼저 읽고, React 컴포넌트와 렌더링 흐름와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
React.memo 완벽 해부: 언제 쓸모 있고 언제 쓸모없는가에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 React 컴포넌트와 렌더링 흐름와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "React.memo를 사용했는데도 컴포넌트가 계속 리렌더링되는 이유는 무엇일까요?"에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "React.memo 완벽 해부: 언제 쓸모 있고 언제 쓸모없는가에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 부모에서 인라인 객체/배열/함수를 props로 전달(매번 새 참조 생성), Context value 변경, 컴포넌트 내부 상태 변경 등을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "React.memo 완벽 해부: 언제 쓸모 있고 언제 쓸모없는가에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] memo는 컴포넌트 전체 메모이제이션, useMemo는 계산 결과값 메모이제이션, useCallback은 함수 자체 메모이제이션임을 설명하고 연관 사용 패턴을 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "React.memo 완벽 해부: 언제 쓸모 있고 언제 쓸모없는가에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 컴포넌트 구조 최적화(상태를 아래로 내리기, 컴포넌트 끌어올리기), memo/useMemo/useCallback, Context 분리, 상태 관리 라이브러리 선택자(selector), children prop 패턴 등을 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"React"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.