React 렌더링 최적화 조언 부탁드립니다.

Question

안녕하세요. 어제 제가 개인 프로젝트 공유하였고 이에 대해 피드백을 받고 수정을 하고 있습니다.(https://okky.kr/articles/1479050)어느 정도 수정을 하였는데도 안 풀리는 점이 있어 이렇게 질문을 남기게 되었습니다.컴포넌트를 나눈다고 나눴는데도 저렇게 각 영역의 전체 레이아웃(?) 은 재렌더링이 되고 있습니다. (Timer 20ms 마다 변화 시)아래 카드 부분은 context 로 timer 랑 묶인게 있어서 그렇다 치고 (Modal 도 같은 의미에도 동일)저 헤더는 진짜 그야말고 Card Game 타이틀이랑 뒤로 돌아가는 navigation 만 있는데 왜 그런지 모르겠네요...코드는 너무 방대해서 요약해서 올리도록 하겠습니다.. (위에 공유드린 url 게시글에 git 도 있긴 합니다 ㅎㅎㅎ)import React from 'react'; /* impor modules ... */ import { useCardGameState, useCardGameTimer, useCardGameDispatch, } from 'src/Provider/CardGameProvider'; const BackDropTypography = React.memo( styled(Typography)(({ theme }) => ({ // ... })) ); /*============================== Header ==============================*/ const Header = () => { return ( Card Game ); }; const MemoizedHeader = React.memo(Header); /*============================== Timer ==============================*/ const GameTimer = () => { const { gameTimer } = useCardGameTimer(); return ( {gameTimer.toFixed(2)} ); }; const MemoizedGameTimer = React.memo(GameTimer); /*============================== Card Area ==============================*/ // 카드영역 Backdrop const CardBackdrop = () => { const { gameState } = useCardGameState(); const { viewTimer } = useCardGameTimer(); const { onGameStart } = useCardGameDispatch(); const isStart = !( gameState === 'INIT' || gameState === 'VIEW' || gameState === 'END' ); return ( {gameState === 'INIT' ? ( ) : gameState === 'VIEW' ? ( {viewTimer} ) : gameState === 'END' ? ( THE END ) : ( '' )} ); }; const MemoizedCardBackdrop = React.memo(CardBackdrop); // 카드 개별 Grid const CardGrid = ({ index }: { index: number }) => { return ( ); }; const MemoizedCardGrid = React.memo(CardGrid); // 카드영역 전체 Grid const CardAreaGrid = () => { const { cards } = useCardGameState(); return ( {cards.map((_, index) => ( ))} ); }; const MemoizedCardAreaGrid = React.memo(CardAreaGrid); const GameCard = () => { return ( <> ); }; export default GameCard;

charlatan · Accepted Answer

쓰나마나한 답변인 것 같은데 뭔가 상위 컴포넌트의 상태가 변해서 아래에 있는 것들도 함께 렌더링되는 것 같은데 그런 곳이 없는지 확인해보면 어떨까요?

React 렌더링 최적화 조언 부탁드립니다.

1개의 답변

Q&A 목록