ReactJS 팁과 요령: 중첩된 렌더링 함수 피하기

내가 작업한 많은 프로젝트에서 발견한 공통 사항은 UI 요소를 렌더링하는 Nested Render Functions 접근 방식입니다.

이 접근 방식과 더 나은 방식으로 변경하는 방법에 대해 자세히 살펴보겠습니다.

중첩 렌더링 함수란 무엇입니까?

기본적으로 다음과 같이 구성 요소 내부의 함수에서 UI 렌더링의 일부를 선언할 때입니다.

const Component = () => {
  function renderSection() {
    return <section>This is my section.</section>
  }

  return (
    <div>
      {renderSection()}
      ...
    </div>
  )
}

구성 요소는 함수일 뿐이므로 현재Component 내부에 새 구성 요소를 선언하는 것과 같습니다.

새 구성 요소로 추출

새 구성 요소로 추출하는 것이 훨씬 낫습니다. 단위 테스트를 보다 쉽게 ​​만들고 구성 요소에 격리하는 데 도움이 됩니다.

앞에서 언급한 예를 다음과 같이 다시 만들어 보겠습니다.

const Section = () => <section>This is my section.</section>

const Component = () => (
  <div>
    <Section />
    ...
  </div>
)

클로저를 사용하는 대신 이제 Section 구성 요소에 대한 순수 함수가 있으므로 더 읽기 쉽고 소품을 제공하기 쉽습니다.

마무리

이 접근 방식을 사용하면 React 순수 구성 요소의 이점을 활용하여 보다 결정적인 구성 요소를 만들 수 있습니다.

구성 요소를 테스트하고 모든 구성 요소에 대해 격리된 동작을 만드는 데 도움이 됩니다.