[React] memo의 효과_컴포넌트를 어떻게 분리하는게 리렌더링이 효율적으로 될까?

[의문 : 왜 컴포넌트를 하나가 아닌 두개로 분리하였을까?]

[결과물 화면]

const TagList = React.memo(({ tags }) => (
  <TagListBlock>
    {tags.map((tag) => (
      <Tag>#{tag}</Tag>
    ))}
  </TagListBlock>
));

이와 같이 한번에 해결할 수 있는데 왜 나눴을까 의심이 들었다. 어차피 tag값이 바뀌면 둘다 렌더링 되는건 똑같지 않나? 라고 생각했지만 다르다.

// React.memo를 사용하여 tag 값이 바뀔 때만 리렌더링되도록 처리
const TagItem = React.memo(({ tag }) => <Tag>#{tag}</Tag>);

// React.memo를 사용하여 tags 값이 바뀔 때만 리렌더링되도록 처리
const TagList = React.memo(({ tags }) => (
  <TagListBlock>
    {tags.map((tag) => (
      <TagItem key={tag} tag={tag} />
    ))}
  </TagListBlock>
));

이처럼 컴포넌트를 따로 분리하여 memo를 사용했을 경우 TagList는 tags의 값이 바뀌었을 때만 렌더링 되고

TagItem의 경우 tag 값이 바뀌었을 때만 렌더링된다.

 

즉, TagItem의 경우 tag가 새로 추가되거나 삭제되었을 경우에만 태그값 하나에 대해서만 리렌더링을 하게된다.