공통 컴포넌트 개발을 하며 겪었던 문제 해결 과정 (Comment)

팀 프로젝트로 영화 평점, 리뷰 웹 사이트를 만들고 있다.

공통 컴포넌트를 만들면서 생겼던 문제점과, 해결했던 방식에 대해 적어보려 한다. 각 컴포넌트에 대한 간략한 기획과 공통 컴포넌트로 만든 이유는 다음과 같다.

• Comment : 댓글, 대댓글, 댓글미리보기, 댓글Input에 사용되는 컴포넌트, 각각 약간의 스타일 차이를 제외하고 거의 동일한 UI를 가졌다.

• Stars : 리뷰 작성, 리뷰 수정(상세페이지, 마이페이지)시에 활용된다. 평점을 남길 때 사용되는 컴포넌트, 마우스 Hover event로 별점이 색칠 되고, Click event로 별점을 선택할 수 있다. (단위 0.5)

  • Stars 대한 개발 과정은 React hover event를 활용한 별점 평점 만들기 (MouseEnter, MouseLeave)에 기록하였다.

이번 글에선, Comment 컴포넌트를 개발하며 겪었던 문제와 해결 과정에 대해 기록해보려 한다.

---

Comment 컴포넌트 구현 과정

댓글 : 프로필, 댓글내용, 생성날짜, 별점, 공감/비공감
대댓글 : 프로필, 대댓내용, 생성날짜
댓글 Input : 프로필, input, 버튼
댓글 Preview : 댓글과 필요한 내용은 같고 스타일이 다름

Figma 초기 디자인
UI 차이가 별로 없어서, 공통 컴포넌트 Comment를 만들고, props를 통해 다른 style을 관리하기로 하였다.

첫번째 시도

type props를 통해 type에 따라 필요한 부분을 넣고 빼고, style을 변경하였다.

하지만 막상 공통컴포넌트를 만들고 보니 프로필 사진+닉네임말고 4가지 유형이 모두 가지고 있는 공통점은 없었다.

또한, 조금씩 다른 부분들이 많았기 때문에 많은 조건문을 사용하게 되었고, 코드가 매우 지저분해졌다.

그리고 아직 모든 로직이 다 들어온 상황이 아니었기 때문에 이후에 기능들이 다 추가되고 나면 얼마나 더 복잡해질지 예상이 되지 않았다.

두번째 시도

• 조건문으로 엉켜있는 컴포넌트를 각각 4개의 컴포넌트로 분리
• _shared 디렉토리에 공통된 부분을 작게 쪼개어서 공통 컴포넌트로 만들어 사용

└── Comment
	├── _shared #공통 컴포넌트    
	│       └── HeaderLeft:프로필, HeaderRightButtons:공감&비공감, HeaderRating:별점
    ├── Review #댓글
    ├── Comment #대댓글
    ├── ReviewInput #리뷰 input
	└── Preview #댓글 미리보기

---

느낀점

이번 문제 해결 과정에 대해 작성하며 문제에 대해 다시 생각해보았다.

로직이 불필요하게 복잡해진 이유는 처음 공통 컴포넌트 개발을 할 때, 컴포넌트를 충분히 쪼개지 않아서 생긴 문제라는 생각이 들었다.

앞으론 비슷하다는 애매한 기준보다, 동일한 것을 먼저 구별하고 동일한 작은 것부터 컴포넌트화 하는 것이 좋을 것 같다.