[ React / UI ] 컴포넌트 추상화

참고사이트

• 카카오 - FE 기술 블로그 / 컴포넌트 추상화

• velog - jinoo.io / 컴포넌트를 레고처럼 쌓아보자!

 

Pablo Picasso, The Bull, 1945

 

*추상화: 여러 가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용

 

 

💀 컴포넌트의 추상화

현대 프론트엔드 개발은 컴포넌트 기반의 프레임워크(혹은 라이브러리)를 사용하여 개발하게 된다.

컴포넌트 단위의 개발로 장점은 무엇일까?

 

👍🏻 장점

1. 재사용성: 컴포넌트는 독립적이고 재사용 가능한 코드 블록으로, 여러 곳에서 동일한 컴포넌트를 사용할 수 있다.

이는 코드의 중복을 줄이고 유지보수를 용이하게 한다.

2. 유지보수 용이성: 컴포넌트는 독립적으로 관리되기 때문에 특정 기능이나 UI 요소를 수정할 때 해당 컴포넌트만 업데이트하면 된다.

이는 코드의 가독성을 높이고 버글르 수정하거나 기능을 추가할 때 효율적이다.

3. 테스트 용이성: 독립적인 단위로 테스트할 수 있어, 각 컴포넌트의 기능을 개별적으로 검증할 수 있다.

4. 협업 효율성: 여러 개발자가 동시에 다른 컴포넌트를 개발할 수 있어, 팀 단위로 작업할 때 효율적이다.

각 개발자는 자신이 맡은 컴포넌트에 집중할 수 있으며, 다른 컴포넌트와의 충돌을 최소화할 수 있다.

5. 성능 최적화: 컴포넌트 기반 아키텍처는 필요한 부분만 렌더링 할 수 있어, 성능 최적화에 유리하다.

 

🧩 컴포넌트란?

프론트엔드에서 컴포넌트는 사용자와의 인터렉션을 통해 필요한 비즈니스 로직을 실행하거나 스타일, 애니메이션과 같은 시각적인 부분을 표현하는 UI(User Interface)를 적절하게 나눈 것이다.

 

다음과 같은 모양의 Input 관련 컴포넌트가 있고, 여러 곳에서 컴포넌트를 호출한다 했을 때, 각 Input은 여러 역할을 할 것이다.

사용자 정보를 예로 들면, 어떠한 인풋은 아이디의 값을 받는, 다른 인풋은 비밀번호를 받는...

이때마다 <input/> 태그를 사용하여 각 태그마다에 className을 지정할 필요없이 한 컴포넌트 정의에서 정의해두고 사용하는 것이다.

 

그럼 생각해보자.

어떻게 나누어야할까?

디자인은 공통되어 있으며, 기능은 각기 다르게하되 호출 시에 디자인 및 기능 또한 수정은 가능하도록.

(컴포넌트 정의하는 곳에서 기능을 지정하지않고 호출하는 곳에서 기능을 정해주자.)

이처럼 입출력을 담당하는 작은 컴포넌트로부터 다양한 요소들을 적절한 단위로 나누고 추상화해야한다.

 

💭 추상화 원칙

• SOLID 원칙의 첫 번째,

SPR (Single Responsibility Principle) - 단일 책임 원칙

즉, 클래스(객체)는 단 한 개의 책임(기능)을 가져야 재사용성과 유지보수성이 높아진다.

 

• 높은 응집도와 낮은 결합도 (High Cohesion, Low Coupling)

컴포넌트 내부 로직은 긴밀하게 작성되어야하지만, 다른 컴포넌트와는 느슨하게 결합되어야한다.

내부 로직이 체계적으로 구성되어야 해당 컴포넌트를 재사용할 수 있기 때문이다.

반면, 다른 컴포넌트와 결합되어 있다면, 하나의 컴포넌트를 수정 시, 다른 컴포넌트에 영향을 미칠 수 있어 유지보수가 어려워진다.

 

• 명확한 인터페이스 정의

컴포넌트 간의 상호작용은 명확하게 정의되어야 한다.

즉, 어떤 컴포넌트가 어떠한 데이터를 주고 받는지 쉽게 알 수 있어야한다.

만약, 데이터 흐름이 명확하지 않다면, 컴포넌트를 이해하기 어렵고, 가독성이 떨어져 불편함이 발생한다.

 

🪜 추상화 단계

1. 중복 코드 식별

기존 코드 및 개발 할 코드에서 중복된 코드를 식별하여 설계합니다.

 

2. 공통 패턴 추출

중복된 코드에 반드시 공통된 패턴이 있을 것이다. 이 공통된 부분을 추출하여 컴포넌트화한다.

만약, 하드코등 되어있다면, 상태 관리를 통해 동적으로 변경할 수 있도록 코드를 수정한다.

 

3. 컴포넌트 분리 및 재구성

공통된 패턴을 추출한 후, 컴포넌트를 적절하게 분리하고, 구조에 맞게 재구성한다. 이렇게하면 코드가 더 효율적이고 유지보수하기 쉬운 구조가 된다.