reThinking Component

carrot·2022년 5월 13일
0

핵심정리

원문 : 케이크를 만드는데 밀가루, 계란, 설탕이 필요하다.
번역 : 케이크는 밀가루, 계란, 설탕에 의존한다.
정의 : 케이크의 의존성 -> 밀가루, 계란, 설탕

React Component의 의존성 파악하기

  1. style
    • css cdn, library etc..
  2. custom logic
    • UI를 컨트롤하는 로직들. 혹은 custom hooks
  3. global state
    • redux와 같은 global state
  4. Remote Data Schema
    • API 서버에서 내려주는 데이터의 형태, 혹은 모양

React Component에 새로운 정보를 추가하려면 새로운 정보 뿐만아니라 다른 수정도 필요하다.
-> 숨은 의존성

import { useNode } from './store'

interface Props {
	articleId: string
}

const Article: React.ExoticComponent<Props> = (props) => {
	const article = useNode({on: 'Article'}, props.articleId)
    
    return (
		<div>
      		<h1>{article.title}</h1>
      	</div>
    )
}

const article = useArticle(props.articleId)처럼 아티클 정보만 가져오는 커스텀 훅스를 사용할 수도 있지만, 이럴 경우 새로운 정보를 추가할 시 또 다른 커스텀 훅스를 가져와야 하고 이는 의존성이 증가한다는 의미가 됩니다.

사용하는 데이터의 모델 정보(여기서는 {on: 'Article'} 부분) 마저 컴포넌트 내부에 두어 의존성 줄일 수 있습니다.

component를 재사용하는 이유

일반적으로 컴포넌트를 재사용하는 이유는 그렇게 설계 했기 때문일 가능성이 큽니다. 주로 props를 전달받아서 출력만을 담당하는 컴포넌트들이 그렇죠. 또 다른 이유는 변경하기 쉽게 하기 위해서 일겁니다.

스타일이라던지 추가로 출력하고 싶은 정보가 있을 때, 같은 컴포넌트를 사용하는 출력 컴포넌트들에 일괄적으로 데이터를 전달하거나 변경할 수 있기 때문입니다.

여기서 중요하게 생각할 부분은 언제 재사용해야 하는가 입니다.

같은 데이터 모델을 의존하는 컴포넌트 -> 재사용
다른 데이터 모델을 의존하는 컴포넌트 -> 분리

{
	feedItems.map((feedItem) => {
    	switch(feedItem.__typename) {
          case 'Article':
            	return <CardArticleFleaMarket articleId={feedItem.id} />
          case 'BizPost':
          		return <CardBizPost articleId={feedItem.id} />
          default:
                return null
                  
        }
    })
}

여기서는 같은 데이터 모델을 가지고 아이템의 타입으로 인해 컴포넌트를 분리하여 사용하는 경우입니다. 이 경우 같은 데이터 모델이라고 생각하여 같은 컴포넌트를 재사용 한다면 차후 Article 컴포넌트 부분에 대한 업데이트를 진행할 경우 BizPost 컴포넌트까지 영향을 받게 되어서 컴포넌트를 분리하여 사용하는 것이 바람직 하겠습니다.

정리

4가지 원칙
1. Keep Locality - 비슷한 관심사라면 가까운 곳에
2. Abstraction by Normalization - 데이터를 ID 기반으로 정리하기
3. Make Explicit - 의존한다면 그대로 드러내기
4. Seperating Components by Model - 모델 기준으로 컴포넌트 분리하기

profile
당근같은사람

0개의 댓글