nested component를 피해야 하는 이유
· 약 5분
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/>;
};