>

같은 함수에서 헬퍼 함수를 ​​정의하는 대신 새로운 React 컴포넌트를 언제 만들어야합니까?

자습서에서는 일반적으로 "StuffList"와 같은 구성 요소가 다음과 같이 정의 된 것을 볼 수 있습니다 :

StuffList = ({ list }) => {
    const renderItem = item => {
        return <div>{item}</div>
    }
    return list.map(item => renderItem(item))
}

위의 예는 정말 간단하지만 목록과 항목 모두에있어 복잡성이 상당히 커질 수 있습니다. 그래서 Item이 자체 구성 요소로 추출해야한다는 좋은 지표가 무엇인지 궁금합니다. 나는 목록과 항목에 대해서만 이야기하는 것이 아니라 생각한 가장 간단한 예일뿐입니다.

  • 답변 # 1

    당신이 짐작했듯이 그것은 의존합니다. 그러나 기존 구성 요소에서 새 구성 요소를 추출하면 추출 기능 리팩토링의 변형으로 간주 될 수 있습니다. 이 리팩토링 사용시기에 대해 권장되는 리팩토링 책에서 Martin Fowler를 다음과 같이 표현하려면 :

    와이즈 비즈

    여기서 잠재적 인 이점은 새 구성 요소를 재사용하여 원래 구성 요소의 크기 (예 : 코드 줄)를 줄이며 React의 경우 렌더링 성능에 도움이 될 수 있습니다. p>

    편집 : Kent C Dodds의 다른 게시물을 위해 구성 요소를 여러 구성 요소로 나눌 때이 게시물을 참조하십시오.

    If you have to spend effort looking at a fragment of code and figuring outwhatit's doing, then you should extract it into afunctioncomponentand name thefunctioncomponentafter the "what."

관련 자료

  • 이전 javascript - 중첩 테이블을 필터링하는 방법을 알고 싶습니까?
  • 다음 vue.js - 날짜 표시를위한 Vue 계산 속성