[React] 컴포넌트 설계 & WET, DRY CodeBase

 

1.  컴포넌트?

• 웹 앱을 구성 하는데 있어 가장 작은 단위
• 재사용이 가능한 각각의 독립된 모듈

공통된 관심사를 묶어 이름을 붙이는 것, 뷰를 추상화 시키는 것

 

2.  컴포넌트를 설계하는 관점

잘 설계한 컴포넌트 == 뷰를 적절한 단위 로 잘 추상화해서 이해하기 쉽다.

 

적절한 단위가 무엇일까?

UI가 아니라 모델 기준으로 컴포넌트 분리하기

 

모델 / 도메인이 다르지만 동일한 컴포넌트가 보인다면?

1. 범용 컴포넌트 또는 디자인 시스템으로 추출한다.

2. 중복구현을 하고 지켜본다.

 

3. WET&DRY Code

WET Code

WET : Write EveryThing Twice  ➡️  중복코드 구현해라

DRY Code

DRY : Don’t Repeat YourSelf ➡️ 중복구현을 하지 말라

dry code의 장점은 재사용이 용이하여 코드가 간단하다는 것이다. 이 부분이 단기적으로는 좋다. 하지만 장기적으로 봤을때, 기능이 하나씩 추가된다? 공동 모듈에 예외 케이스가 하나씩 추가되다 보면 처음엔 간단했던 코드가 더 복잡해 보일 수 있다는 단점이 있다.

 

WET or DRY?

wet와 dry는 앞에 살펴본 것과 같이 반대되는 의미의 단어이다.

WET CodeBase - Dan Avramov

https://www.deconstructconf.com/2019/dan-abramov-the-wet-codebase

The Wet Codebase by Dan Abramov – Deconstruct

중복 코드가 없으면 너무 복잡해지고 만약 중복 코드가 많아지면 의존성이 너무 강해진다.

➡️ 중복코드를 inline시키고 지켜보자.

inline 시킨다 : 공통 코드를 없애고 각각의 사용처에 코드를 복붙 하는것을 의미

 

4. 결론

1. 컴포넌트의 핵심은 뷰를 추상화 하는 것이다.
2. 도메인이나 모델을 기준으로 분리하자.
3. 서로 다른 컴포넌트의 중복은 천천히 추상화하자

 

---

[참고자료]

https://www.youtube.com/watch?v=TqLnQsd_Llk

https://velog.io/@gomjellie/The-Wet-Codebase

촉촉한 코드, 건조한 코드