"nested-component" 태그로 연결된 1개 게시물개의 게시물이 있습니다.

nested component를 피해야 하는 이유

2024년 10월 27일 · 약 5분

Hyunmo Ahn

Front End Engineer @ Line+

Introduction

프로젝트를 진행하면서 불필요하게 re-render가 발생하는 문제를 만났다.

단순히 render를 하는 것 뿐 아니라 매 render시마다 DOM을 새롭게 다시 그리고 있던 것이 문제였는데, 원인은 nested component로 사용한 코드였다.

따라서 이 글에서는 nested component를 사용하는 것을 피해야 하는 이유를 설명하고자 한다.

Cheat Sheet

// Bad
const List = ({ hasWrapper, borderStyle, children }) => {
  const Border = () => {
    return <p style={borderStyle}>{children}</p>;
  }

  if (hasWrapper) {
    return (
      <Wrapper>
        <Border />
      </Wrapper>
    );
  }

  return <Border/>;
};

// Good
const List = ({ hasWrapper, borderStyle, children }) => {
  if (hasWrapper) {
    return (
      <Wrapper>
        <Border borderStyle={borderStyle}>
          {children}
        </Border>
      </Wrapper>
    );
  }

  return (
    <Border borderStyle={borderStyle}>
      {children}
    </Border>
  );
};

const Border = ({ borderStyle, children }) => {
  return <p style={borderStyle}>{children}</p>;
}

위와 같이 Border의 코드를 재사용하고, List의 props를 재사용하기 위해 nested component를 사용하게 될 수 있다. 하지만 이런 경우 children은 불필요하게 매 render시마다 새롭게 DOM이 그려지게 된다.

Introduction​

Cheat Sheet​

Introduction

Cheat Sheet