[지속 가능한 Frontend개발] Component

Component는 의존적이지 않고(independent), 재사용이 가능한(reusable) 고립(isolation)된 단위를 말한다.

 

이 정의에 맞춰서 Component를 개발하는 것이 가장 지속 가능한 Component가 나온다.

이 정의에 맞추기 위한 글들이 여러가지가 있지만 여기서도 한번 살펴보겠다.

 

독립성

다른 Component에 의존되지 않는 것을 말한다. 

개발자는 최대한으로 의존적이지 않게 해야 하지만 개발하다 보면 항상 독립적으로 만들기가 쉽지 않다(언젠간 의존성을 가진 Component를 만들게 될 것이다)

이런 경우엔 아예 코드 자체에서 최대한으로 의존성을 노출해줘야 한다.

독립적인 Component를 만든다는 것이 결국 재사용을 위함인데 재사용 시 개발자에게 '나 여기에 종속돼요!'라고 밝혀주는 게 Risk를 감소시킬 수 있다.

자신이 Component를 독립적으로 잘 만들었나에 대한 판단은

단순히 해당 FIle(또는 Directory)만 가져가서 다른 Project에 사용 가능한지를 보면 된다.

 

재사용성

말 그대로 다시 사용하는 것이다. 

같은 역할을 하는 기능이 있을 때, Component를 다시 사용하는 것인데

가장 잘 빠지는 함정은 UI가 같다고 재사용하면 안 되는 것이다.

재사용의 기준은 기능과 도메인(Model, Data) 중심으로 기준을 잡아야 한다. 

UI가 같다고 다른 기능에 재사용을 하면 그 부분을 소화하기 위한 불편한 props가 발생하고 불편한 logic이 발생된다.

이 런 불편한 부분들은 Risk를 향상하므로 기능에 따라 다른 컴포넌트로 선언해줘야 한다.

 

고립성

Component는 원래 Class다(Pascal case를 사용하지 않는가)

그러므로 OOP(객체지향)적인 사고가 필요하고, 이 고립성은 객체지향의 캡슐화에 해당된다.

명확히 구분하고 은닉되는 것이 고립성이라고 볼 수 있다

 

그럼 이 기준으로 Component를 만들면 되는가? 

이 세 가지 성질을 기준으로 Component를 만들어야 하는데 빠지기 쉬운 함정들이 있다.

 

Component 분리 기준

컴포넌트는 단일 책임 원칙(SRP)에 따라서 한 가지의 역할만 수행해야 한다.  컴포넌트가 하는 역할이 많다면 분리해야 한다.

이 부분은 재사용성과 대립되는 부분이라 재사용을 잘하기 위해 여러 역할을 주어지는 경우가 있다.

아까 말했듯이 Component의 재사용 기준은 기능과 도메인 중심으로 사고하여 기준을 잡아야 한다.

 

하지만 이런 기능과 도메인 중심의 사고를 하면서 Component를 나누면 복잡해지고, 반복되는 코드도 발생되는 문제가 생긴다.

그러면 다른 기준으로 Component를 나눠 보고자 한다. 

Component는 도메인을 모르는 Component로 만드는 것이다. 

Component의 분리 기준은 SW 기본 원칙인 '역할과 책임'으로 구분해볼 수 있다.

 

역할

1. 외부로부터 Data를 받아온다

2. Data를 UI로 표현한다.

3. 사용자의 Interaction을 수행한다. 

 

책임

1. 컴포넌트 이름에 맞는 것에 대한 수행

2. 의존되는 Data에 대한 수행

 

이 역할 case로 Component를 분리하고, 해당 Component에 알맞은 책임을 부여하는 것으로

Component를 분리하면서 도메인을 모르게 하기 위한 Component, Atom 단위의 최소 단위로 만들어 조합해 사용하는 방식이다. 

 

2. 조합 사용하기 좋은 Component

Component 만들다 보면 이런 함정에 빠진다.

 

1. 재사용성과 독립성을 가진 Component를 만들어야 한다

2. 재사용성과 독립성을 가지기 위해 Props가 많아진다.

3. Props를 처리하기 위한 Logic이 많아진다.

4. 구현이 복잡해지고 Component를 사용하기 위한 조건이 많아진다.

5. 재사용이 어려워지고 의존성이 발생한다. 

 

이런 함정을 피하기 위해선 

물론 Component의 작은 단위로 하는 것도 있지만

Component가 확장 가능한 구조로 설계해야 한다.

가장 쉽게 확장 가능한 구조로 만드는 것이 Children, Optional Props 등을 활용해서 만들 수 있다.

 

 

오늘 이 두서없는 글을 정리하자면

1. 지속 가능한 Component는 최소 단위로 만들어 조합해 사용한다.

2. 지속가능한 Component는 확장 가능한 구조로 만든다.

로 볼 수 있다.

 

추가

 

재사용될 일이 없는 Component는 추상화에 리소스를 쏟지 않아야 한다.

Component를 재사용하기 위한 이유는 개발의 리소스를 감축하기 위한 목적이 있는데 

재사용될 일이 없는데 재사용하게 만들기 위해 리소스를 사용한다면 낭비가 돼버리고

일을 위한 일이 돼버리니까.