Component의 관심사

spacing 값은 밖으로

• 컴포넌트 사이의 spacing 값은 컴포넌트 내부가 아닌 밖에서 제어하는 것이 이상적
  • 컴포넌트에 내부에 포함할 경우 spacing 조절이 어려워짐
  • 각각의 컴포넌트 내부에서 파악 및 수정 필요

  export const Component = () => {
  	return (
  		<>
  			<ComponentA />
  			<Spacing size={12} />
  			<ComponentB />
  			<Spacing size={12} />
  			<ComponentC />
  		</>
  	)
  }
  

렌더링과 관련된 로직만 포함하기

• 컴포넌트 안에는 렌더링과 밀접하게 관련된 것만 넣는 게 좋음
• 로직상 필요한 계산 로직(ex. getRoomName)은 컴포넌트 내부에 선언되면 안됨
  • 순수함수로 분리하는 게 좋다
  • 테스트를 못함
  • 컴포넌트를 이해할 때 계산 로직도 항상 같이 읽게 됨

UI만 넣자는 목적의 말은 아닌 것 같음. 컴포넌트에 UI만 있기는 힘들고 재사용도 어렵다며 언급도 같이 되었으며, 함수와 변수의 선언부와 사용처가 멀어지는 것을 지양하자고 함. 케이스에 따라 적절한 고민이 필요.

페이지 컴포넌트는 복잡하지 않게

• 모든 컴포넌트를 조합하는 page 컴포넌트는 복잡하지 않게 유지한다.
• 컴포넌트를 설명하는 텍스트는 상위 컴포넌트에 두는 것이 좋다
  • 페이지가 복잡해지면 추상화 수준에 따라 달라지겠지만,
  • 이와 같은 형태가 UI와 대응되는 컴포넌트를 빠르게 찾을 수 있고
  • 컴포넌트의 기능도 아니기 때문에 과한 책임으로도 볼 수 있다.

// bad X
export const Component = () => {
	return (
		<>
			<SearchBar />
			<MemberDataTable />
		</>
	)
}

// good O
export const Component = () => {
	return (
		<>
			<div>검색</div>
			<SearchBar />
			
			<div>회원 정보 테이블</div>
			<MemberDataTable />
		</>
	)
}