React 컴포넌트를 어떻게 만들어야 할까?

React는 컴포넌트 기반 라이브러리입니다.

 

웹을 개발할 때 헤더, 메인 콘텐츠가 들어가는 부분, 버튼 등을 만든다면 하나의 컴포넌트로 묶어서 관리할 수 있습니다. 그렇기 때문에 개발하다가 특정 부분에서 오류가 생겼다고 한다면, 그 컴포넌트만 수정하면되기 때문에 코드를 간결하게 만들 수 있습니다.

 

지금까지 React로 여러 가지 프로젝트를 해보면서 많은 컴포넌트들을 만들어보았고, 

그 과정에서 비슷한 기능인데도 모두 따로 만든다던가 하는 방식으로 비효율적인 방법으로 만들었다가

또 다시 그 코드를 고쳐서 하나의 컴포넌트를 깔끔하게 만들었을 때 재미를 느꼈습니다.

 

그래서 컴포넌트를 어떻게 해야 잘 만들 수 있을 지에 대한 점이 궁금해 몇 가지 글과 웨비나를 참고해서 정리해봤습니다.

 

---

 

1. React 컴포넌트와 추상화

• 복잡한 UI를 컴포넌트 단위의 적절한 책임으로 나누어 추상화하는 것은 매우 중요함
• React 컴포넌트에서 책임을 적절하게 나누기 위한 방법들
  1. 범용 컴포넌트
     • 도메인 의존성을 제거 → 공통의 기능을 높이기 위한 응집도 높이기 & 재사용성 극대화
     • 너무 많은 책임을 수행하지 않도록 합성을 사용하여 적절하게 나눠야 함
  2. 도메인과 의존성이 있는 컴포넌트
     • 훅을 사용하여 컴포넌트와 비즈니스 로직의 결합도를 최대한 낮춰야 함
     • 어플리케이션 전역에서 사용되는 도메인은 데이터 간의 의존성이 생기지 않도록 주의하여 설계해야 함
     • 설계 시 데이터를 통합하거나 분리하거나 여러 방법을 통해 모듈 간의 결합도를 낮추고 변화에 유연한 구조를 만드는 것이 중요함

 

React 컴포넌트와 추상화 | 카카오엔터테인먼트 FE 기술블로그

 

 

2. 지속 가능한 성장과 컴포넌트

변경에 유연한 코드는 안정적으로 비즈니스를 운영하면서 빠른 속도를 유지하기에 필수적인 요소

 

모든 사용자가 어려움 없이 잘 사용한다면 제품이 변경되지 않겠지만 실제로는 그렇지 않기 때문에,

변경을 예측하려고 하지말고 대응해야 한다.

 

변경에 유연하게 대응하도록 컴포넌트를 잘 만들어야 한다.

 

1. Headless 기반의 추상화하기
   
   • 변하는 것과 상대적으로 변하지 않는 것 구분하기
   • headless : 한 가지 문제에만 집중하는 패턴
   • 데이터와 UI 분리
   • 모듈화 : 변경에 유연해지려면 각 모듈이 한 가지 일만 하는 게 중요함
2. 한가지 역할만 하기
   • 또는 한 가지 역할만 하는 컴포넌트의 조합으로 구성하기
3. 도메인 분리하기
   • 도메인을 포함하는 컴포넌트와 그렇지 않은 컴포넌트 분리하기
   • 일반적인 인터페이스로 분리하기 → 컴포넌트의 역할을 이해하기 쉽도록 하기

 

컴포넌트를 만들 때는 인터페이스를 먼저 고민해야 한다. (아래 3가지가 구현보다 중요하다)

1. 의도가 무엇인가?
2. 이 컴포넌트의 기능은 무엇인가?
3. 어떻게 표현되어야 하는가?

컴포넌트를 나누는 이유도 생각해봐야 한다.

1. divide and conquer : 컴포넌트를 분리하면 실제로 복잡도를 낮추는가?
2. don't reinvent the wheel : 컴포넌트로 분리하면 재사용 가능한 컴포넌트인가?
3. 동료와도 함께 고민해보고 나누기

 

3. 컴포넌트, 다시 생각하기

 

1. 비슷한 관심사라면 가까운 곳에 두기
2. 데이터를 ID 기반으로 정리하기
3. 이름 잘 짓기 (의존한다면 이름에 그대로 드러내기)
4. 재사용하기
5. 모델 기준으로 컴포넌트 분리하기
   • 같은 모델을 의존하는 컴포넌트 : 재사용
   • 다른 모델을 의존하는 컴포넌트 : 분리

 

 

 

 

 

---

느낀점

공통적으로 강조하는 부분은 2가지인 것 같습니다.

1. 재사용성을 높이기
2. 적절히 나누기

사실 아직까지는 개발 경험이 많지 않아서 모든 부분을 이해할 수는 없지만, 이미 작성했던 코드들을 고쳐보면서 

위에서 정리한 방법들을 적용해보며 좋은 컴포넌트를 만들 수 있도록 노력해보려합니다.