NULL 구성 요소 반환 중지

React의 조건부 렌더링은 일부 유효성 검사에 따라 불필요한 렌더링을 피하는 앱을 빌드하는 데 도움이 되며 툴팁, 모달, 서랍 메뉴 등에 사용할 수 있습니다. 그러나 잘못하면 앱을 개선하는 대신 성능을 잃을 수 있습니다.

다음과 같은 것을 보는 것은 매우 일반적입니다.

import React, {useState} from 'react';

export const MyComponent = ({}) => {
   const [show, setShow] = useState(false);
   return (
      <p>This is my main component</p>
      <MyChildComponent show={show} />
   )
} 

export const MyChildComponent = ({show}) => {
   return show ? <p>This is my child component</p> : null;
}

이는 애플리케이션의 성능을 잠재적으로 많이 저하시킬 수 있는 실수입니다. 왜요? 이것은 조건부 렌더링이 아니기 때문에 이 예제에서 하는 것은 NULL 구성 요소, 즉 NULL을 렌더링하는 구성 요소를 반환하는 것입니다.

하지만 여러분은 "예, 하지만... null이므로 아무 것도 하지 않습니다"라고 생각할 수 있습니다. Au 내 친구를 반대하고 그 이유는 NULL COMPONENT라는 이름에 의존하며 구성 요소에는 무엇이 있습니까? 맞습니다. 수명 주기입니다. 따라서 Null 구성 요소를 반환할 때 상위 구성 요소에서 수행하는 작업에 따라 트리거되는 전체 수명 주기가 있습니다.

진정한 조건부 렌더링:

이러한 문제를 피하기 위해 올바른 방법은 부모 구성 요소에 대한 조건문을 수행하여 해당 자식 구성 요소를 호출하지 않도록 하는 것입니다. 우리는 같은 예를 사용할 것입니다:

import React, {useState} from 'react';

export const MyComponent = ({}) => {
   const [show, setShow] = useState(false);
   return (
      <p>This is my main component</p>
      show ?? <MyChildComponent />
   )
}

export const MyChildComponent = () => {
   return <p>This is my child component</p>;
}

쇼 유효성 검사를 자식 대신 부모 구성 요소로 이동하면 렌더링이 진정한 조건부로 만들어집니다. 이 예에서 트리거되는 유일한 수명 주기는 MyComponent가 호출되지 않기 때문에 MyChildComponent 수명 주기뿐입니다.

구성 요소 내부에서 유효성 검사가 필요한 이유는 무엇입니까?

레거시 코드로 작업하고 구성 요소가 호출되는 파일을 모두 변경하지 않고 무언가를 수정해야 하는 경우에 발생할 수 있습니다. 그런 다음 짧은 시간 동안 유효성 검사가 많이 변경되지 않는지 확인해야 합니다.

해당 소품이 많이 변경되지 않으면 React에서 제공하는 memo() 기능을 사용하여 해당 구성 요소를 메모화하고 해당 구성 요소에서 불필요한 재렌더링을 방지하고 거대한 리팩터 없이 앱의 성능을 향상시킬 수 있습니다. 그러나 이 prop이 많이 변경되면 이전에 배운 대로 유효성 검사를 변경해야 합니다. 그렇지 않으면 성능이 떨어질 수 있습니다.

내부에 조건부 렌더가 있지만 항상 렌더링되는 래퍼 구성 요소와 같은 것을 구축하는 경우 예를 들어 도구 설명 구성 요소 래퍼 다른 팁은 쇼를 도구 설명 구성 요소 내부의 상태로 관리하고 래핑하는 것입니다. memo() 기능을 사용하여 불필요한 재 렌더링 및 prop 전달을 방지하여 구성 요소를 재사용 가능하고 자율적이며 성능 있게 만듭니다.


다른 의견이 있습니까? 저처럼 생각하시나요? 게시물에 무언가를 추가하고 싶습니까? 아래 댓글로 해보세요!

나는 이 일을 완전히 비영리로 하고 있지만 당신이 나를 돕고 싶다면 갈 수 있습니다here and buy me a coffee ;)