1. 문제 발생

1차 프로젝트를 진행하면서 메인 페이지를 작업하던 중 아직 초반 작업중인데 코드의 길이가 100줄이 넘어가며 관리가 힘들어지고 가독성도 떨어져서 정리를 해야겠다고 생각을 하게 되었다. 또한 메인 페이지 하단에 있는 '베스트 상품'의 경우 추후에 상품 리스트를 만들 때 다시 사용할 수 있어서 가독성과 재사용성을 동시에 높일 수 있는 컴포넌트화 작업을 결심했다.

이미 겉잡을 수 없이 길어지고 있던 나의 코드..

이에 대해 Y멘토님께 문의를 드린 결과 "회사, 팀, 프로젝트 마다 다른 구조를 가지고 있어 컴포넌트화에는 정답이 없지만 현재로서는 가독성과 재사용 측면에 초점을 나누어 컴포넌트를 분리할 수 있다"고 회신을 주셨다.

2. 컴포넌트를 분리하는 이유

그렇다면 컴포넌트를 분리하는 이유는 무엇일까?
컴포넌트 분리의 핵심은 바로 관심사의 분리이다. 관심사의 분리란 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는 것을 의미한다. 그것을 가능하게 하는 것이 바로 컴포넌트의 분리이다. 앞서 초반에 리펙토링을 하기 전의 100줄이 가볍게 넘어가던 나의 코드와 같이, 복잡한 컴포넌트는 그만큼 재사용이 어렵고 가독성, 유지보수성 모두 현저히 떨어진다. 다시 말해, 적절히 잘 분리되고 정리된 컴포넌트 분리는 코드의 가독성과 유지보수성을 향상시켜 코드의 퀄리티를 높여준다.

3. 컴포넌트 분리 기준

앞서 멘토님의 말씀처럼 컴포넌트 분리 기준은 회사마다 부서마다 프로젝트마다 기준점을 어디에 잡느냐에 따라 상이하기 때문에 다양한 기준점이 존재한다. 이 글에서는 제일 기본이 되는 가독성과 재사용성에 맞추어서 진행해보았다.

4. 문제 분석

당시 우리팀의 메인 페이지의 구조를 분석해보면 크게 맨 상단의 프로모션 섹션, 중단의 배송 안내 섹션, 하단의 베스트 상품 리스트 섹션으로 나누어볼 수 있다. 같은 페이지에 있는 내용이라도 세 가지 부분이 완전히 다른 목적성을 가지고 있었기에 관심사 분리 측면에서 세 갈래로 나누기로 했다.

Main
├── Components
│   └── ProductCard
│       ├── ProductCard.js
│       └── ProductCard.scss
├── Main.js
├── Main.scss
└── Section
    ├── BestProcuct
    │   ├── BestProcuct.scss
    │   └── BestProduct.js
    ├── Delivery
    │   ├── Delivery.js
    │   └── Delivery.scss
    └── Promotion
        ├── Promotion.js
        └── Promotion.scss

5. 문제 해결

또한 멘토님께 문의 드린 결과 앞서 언급했던 메인 페이지의 큰 세 갈래인 프로모션, 배달정보, 베스트 상품 리스트를 큰 갈래로 나누는 것에 동의를 하셨고 베스트 상품 리스트의 개별 카드로 들어가는 컴포넌트는 추후 상품 리스트에도 사용할 수 있도록 컴포넌트 파일로 분리를 하는 것을 권장해주셨다.

메인 페이지의 베스트 상품 섹션과 유사한 구조를 가진 상품 리스트 페이지 ⬇️

이에 덧붙여서 "회사, 팀, 프로젝트 마다 다른 구조를 가지고 있어 컴포넌트화에는 정답이 없지만 현재로서는 가독성과 재사용 측면에 초점을 나누어 컴포넌트를 분리할 수 있다"고 회신을 주셨다.

---

해당 컴포넌트화 작업을 통해 상품 리스트의 레이아웃과 기능을 구성하는 데에 많은 시간을 아낄 수 있었고 웹 사이트의 통일성을 유지하기에도 용이했다.

하지만 너무 컴포넌트 분리를 하며 페이지를 조각냈던 탓일까.. 이후에 다른 팀원이 내가 구성한 다른 페이지에 추가 기능을 덧붙이면서 너무 깊게 컴포넌트화를 해서 오히려 가독성이 떨어져보인다고 피드백을 주어서 목적성과 방향성이 일맥상통하는 컴포넌트는 굳이 분리하지 않도록 주의하기로 결심했다.