React 조건부 Rendering시 주의점

 

조건부 사용시 가장 주의해야 할 점은

 

반드시 조건부 Rendering이 발생하는 컴포넌트가 아니 해당 컴포넌트를 사용하는 곳에서

 

조건부를 결정해야 한다는 것입니다.

 

말이 어려운데 간단한 샘플을 보겠습니다.

 

---

1. 동적 로딩이 불가합니다.

 

- 먼저 동적로딩에 대해 알아봅시다.

https://ko.reactjs.org/docs/code-splitting.html

코드 분할 – React

 

해당 컴포넌트를 초기 로딩하지 않고 사용할때 로딩하여 초기 속도를 향상시키는 목적으로 사용합니다.

하지만, 해당 컴포넌트에 대한 조건부 Rendering을 안에 두면 무조건 초기 로딩해야 합니다.

const PopupTodo = React.lazy(() => import('@/components/popup/PoupTodo'));
// React.lazy 로딩이 의미가 없다.
...
<PopupTodo />

 

 

isShow가 true가 될때 즉 사용할대 동적 로딩

const PopupTodo = React.lazy(() => import('@/components/popup/PoupTodo'));
const [isShow, setShow] = useState(false);
// isShow가 true가 될때 즉 사용할대 동적 로딩
....
{isShow && <PopupTodo />}

 

 

2. 필요없는 Rendering이 계속적으로 발생합니다.

 

react component는 function으로 호출되기 때문에 무조건 해당 function이 호출되며,

그안에 있는 로직도 호출됩니다.

 

Rendering은 호출 되지 않더라도 function안에 복잡한 로직이 존재한다면 비용을 낭비하게 됩니다.

 

아래와 같이 해당 for문이 계속 실행됩니다.

export default function PopupTodo() {
  const [isShow, setShow] = useState(false);
  useEffect(() => {
    for (let index = 0; index < 1000000; index++) {
      console.log(index);
    }
  });
   return (
    <>
      {isShow && (
        <SlidePopup title="팝업 Todo" onExited={() => setShow(false)}>
          <PageContent paddingTop={20}>
            <ListStyled>              
              <li data-testid="todoItem">
                할일2
              </li>
            </ListStyled>
          </PageContent>
        </SlidePopup>
      )}
    </>
  );
}    

 

 

---

 

따라서 반드시, 부모 component에서 Rendering을 제어하여 비용낭비를 줄여야 합니다.

해당 내용은 React 뿐만 아니라 모든 SPA에서도 동일합니다.