Analog Clock

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다.

 

- 현상

AnalogClock 컴포넌트 내에서 불필요한 리 렌더링 발생

return (
    <Container>
      <Hour deg={hourDeg}></Hour>
      <Min deg={minuteDeg}></Min>
      <Sec deg={secondDeg}></Sec>
      <Time deg={0}>|</Time>
      <Time deg={30}>|</Time>
      <Time deg={60}>|</Time>
      <Time deg={90}>|</Time>
      <Time deg={120}>|</Time>
      <Time deg={150}>|</Time>
      <Time deg={180}>|</Time>
      <Time deg={210}>|</Time>
      <Time deg={240}>|</Time>
      <Time deg={270}>|</Time>
      <Time deg={300}>|</Time>
      <Time deg={330}>|</Time>
    </Container>
  );

   

 

- 발견

불필요한 리 렌더링 발생을 최소화 하기 위해 상태를 가지고 있는 Hands Component를 분리

const AnalogClock = () => (
  <Container>
    <Hands />
    <Scales />
  </Container>
);

- 배운점 및 선언

이 코드에는 AnalogClock Component를 전부 리 렌더링 해도 큰 차이가 없을 듯 하지만 사소한 부분도 신경 쓰는 연습을 계속 해야겠다.