컴포넌트 분리의 기준?

• 재사용성
• 복잡성

코드가 재사용 될 가능성이 있다면 새로운 컴포넌트를 만드는 건 좋은 생각입니다. 코드가 복잡하다면 가독성을 개선하고 유지보수 할 수 있게 만들기 위해 컴포넌트를 분리할 수 있습니다.³

컴포넌트는 UI를 독립적이고 재사용 가능한 조각으로 나눌 수 있습니다. 그리고 각 조각을 독립적으로 고려할 수 있습니다.⁴

재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냅니다. UI 일부가 여러 번 사용되거나 UI 일부가 자체적으로 복잡한 경우에는 별도의 컴포넌트로 만드는 게 좋습니다.⁵

컴포넌트를 만들 때 가장 많이 발생하는 실수 다섯가지⁶

1. 복잡한 컴포넌트를 만든다.

2. 하나의 컴포넌트에 여러 책임을 추가한다.

3. 몇몇 동작하는 부분을 결합하여 컴포넌트를 만든다.

4. 비지니스 로직을 컴포넌트에 추가한다.

1. 재사용 가능한 컴포넌트

재사용 가능하다는 것은 곧 일반적이라는 것.

function Button(...) {
  return <button>...</button>
}

function ButtonWithIcon(...) {
   return (
     <div>
       <i>...</i>
       <button>...</button>
     </div>
   );
}

위의 두 컴포넌트는 둘 다 “버튼” 이지만, withIcon은 아니다. ⇒ 버튼을 분리

“다른 컴포넌트가 가져가서 사용할 수 있도록 보편적인 속성을 가지고 있는가?”

HTML 요소 측면에서의 재사용성