성능 최적화 기초 (useMemo, useCallback, React.memo)
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. React.memo의 역할로 올바른 것은?
💡 React.memo는 고차 컴포넌트(HOC)로, 이전 렌더링과 props를 얕은 비교(shallow comparison)하여 같으면 리렌더링을 건너뜁니다. 자식 컴포넌트가 부모의 무관한 상태 변경으로 불필요하게 리렌더링되는 것을 방지합니다.
Q2. useMemo와 useCallback의 차이점은?
💡 useMemo는 계산된 값(number, object, array 등)을 메모이제이션합니다. useCallback은 함수 자체를 메모이제이션하여 같은 함수 참조를 유지합니다. 사실 useCallback(fn, deps)은 useMemo(() => fn, deps)와 동일합니다.
Q3. 다음 코드에서 문제점은? const handleClick = useCallback(() => { setCount(count + 1); }, []);
💡 의존성 배열이 빈 배열([])이면 handleClick은 처음 생성될 때의 count 값(0)을 항상 참조합니다. count가 5가 되어도 클릭 시 1이 됩니다. 해결책: [count]를 의존성에 추가하거나, setCount(prev => prev + 1)처럼 함수형 업데이트를 사용합니다.
Q4. React.memo만 적용하고 useCallback을 적용하지 않으면 어떤 문제가 발생할 수 있나요?
💡 부모가 리렌더링될 때마다 함수(예: onClick)가 새로운 참조로 생성됩니다. React.memo는 props를 얕은 비교로 확인하는데, 함수 참조가 달라지면 props가 "변경된" 것으로 판단하여 리렌더링이 발생합니다. React.memo + useCallback을 함께 사용해야 효과적입니다.
Q5. 성능 최적화의 올바른 접근 방법은?
💡 "성능 최적화 황금 원칙": 먼저 올바른 코드를 작성하고, 실제로 성능 문제가 발생할 때 React DevTools Profiler로 병목 지점을 측정한 뒤 최적화하세요. 무분별한 useMemo/useCallback 사용은 오히려 메모리 사용 증가와 코드 복잡도 증가로 역효과가 날 수 있습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.