컴포넌트를 분리하는 기준과 방법

컴포넌트란?

컴포넌트란 어떠한 시스템을 구성하는 요소 중 하나의 단위로, 소프트웨어 개발에서 재사용 가능하고 독립적인 기능 또는 모듈을 의미한다.

컴포넌트의 역할

• 데이터 그리기 : 외부에서 주입받은 데이터나 상태와 같은 내부 데이터를 관리

• UI 그리기 : 데이터가 사용자에게 어떻게 보여질 지 정의

• 사용자와 상호작용 : 클릭과 같이 사용자와 어떻게 상호작용 할 지 정의

리액트 컴포넌트를 분리하는 기준은 무엇일까?

• 단일 책임 원칙 (Single Responibility Principle) 지키기

  각 컴포넌트는 하나의 기능에만 집중하도록 설계해야 한다. 여러 기능을 수행하거나 여러 역할을 가지고 있으면 안된다. 이를 통해 유지보수가 쉽고 재사용성이 높아진다.

  여러 기능이 필요하다면 각각의 역할을 하는 것들을 하나의 컴포넌트를 구현하고 조합한다.

• headless 기반의 추상화

  UI(스타일링)을 제외하고, 상태나 데이터와 관련된 부분은 따로 다루는 패턴이다.

  즉 컴포넌트는 상태를 가지는 컴포넌트와 상태를 가지지 않는 컴포넌트로 나뉜다. 상태를 가지는 컴포넌트는 state를 관리하므로 비즈니스 로직과 상태 업데이트 코드를 포함한다.

  
  

  디자인 패턴 중 Container/Presentational 패턴과 유사

  • Presentational Components:

    • how things look을 담당한다.

    • 즉 렌더링 되었을 때 어떻게 생겼는지를 담당하는 컴포넌트이다.

    • 데이터를 props로 받아와서 화면에 뿌리기만 하고, 따로 state를 가지거나 외부로부터 데이터를 가져오는 동작을 하지는 않는다.

    • Presentational Component는 props에 대한 순수함수이다.

  • Container Components:

    • 어떤 데이터가 보여질 지에 대해 다루는 컴포넌트

    • how things work을 담당한다.

    • 데이터를 가져오거나 수정을 담당하는 컴포넌트이다.

    • 핸들링한 데이터를 Presentational Component에 props로 주입해주거나, 또 다른 Container Component에 넘긴다.

컴포넌트 분리가 중요한 이유는 무엇일까?

• 재사용성

  공통적으로 사용되는 UI 부분을 별도의 컴포넌트로 분리하여 코드의 중복을 줄이고, 다양한 곳에서 재사용할 수 있다.

• 복잡성 관리

  복잡한 기능을 가진 컴포넌트를 더 작고 관리하기 쉬운 단위로 분리하여 개발 및 유지보수의 효율을 높인다. 이는 전체적인 코드베이스의 이해도를 높이고, 개별 컴포넌트의 수정에 따른 전체 시스템 영향도를 줄인다.

• 독립적인 개발 및 테스트 가능

  독립적인 기능을 수행하는 컴포넌트로 분리함으로써, 각 컴포넌트의 개발과 테스트가 용이해진다. 이는 특히 큰 팀에서 여러 개발자가 동시에 작업할 때 유리하다.

  
  

  끝으로, 개발 과정에서 예기치 못한 화면이나 기능 수정이 필요할 때가 있다. 이러한 수정은 사용자에게 보다 나은 서비스를 제공하기 위해 필수적이다. 따라서 컴포넌트를 세밀하게 분리하여 각 모듈이 단 하나의 기능만 수행하도록 함으로써, 변경에 보다 유연하게 대응할 수 있어야 한다.

  "변경을 예측하지 않고 변경에 대응해야한다" 라는 말처럼 변경에 유연해지기 위해 노력해야한다.