합성 컴포넌트

디자인 패턴(Design Pattern)이란?

개발하면서 발생하는 반복적인 문제들을 어떻게 해결할 것인지에 대한 해결 방안으로
소프트웨어 개발에서 자주 발생하는 문제에 대해 검증된 해결 방법을 제공하는
재사용 가능한 설계를 의미한다.

합성 컴포넌트란?

합성 컴포넌트란 소프트웨어 개발에서 재사용이 가능한 구성 요소를 만들기 위해
여러 개의 다른 컴포넌트를 조합하는 디자인 패턴이다.
부모 컴포넌트와 자식 컴포넌트가 독립적으로 동작하면서도 공통 상태나 기능을 공유하게 되며
복잡한 UI를 더 모듈화 하고 재사용 가능하게 만드는 데 도움을 줍니다.

 

 

카카오 FE합성 컴포넌트 디자인 패턴에 대해 글을 보고 참고하여
이미지에 사용된 사용자 채팅UI를 합성 컴포넌트 방식으로 최대한! 설계해 보았다.
카카오 FE 합성컴포넌트 참고:https://fe-developers.kakaoent.com/2022/220731-composition-component/

 

먼저 컴포넌트를 header, body, image, footer로 구분하여
작은 단위의 컴포넌트로 설계를 해보았다.

ChatMain은 데이터를 가져오고 저장하는 부분으로 Context API기능을 사용하여 
비즈니스 로직을 관리하도록 하였다.

이렇게 작은 단위의 컴포넌트들을 만들어서 chat/index.tsx폴더에서
Object.assign 메소드를 사용하여 만든 컴포넌트들을 묶어주었다.

 

Object.assign 메소드 mdn :

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

객체에 객체를 병합하는 메서드인데 합성 컴포넌트에서 사용하는 이유는?

네임스페이스 관리

Object.assign을 사용하여 여러 컴포넌트를 하나의 객체에 통합하면,
코드에서 이름 충돌을 방지하고 컴포넌트 이름을 일관되게 관리할 수 있다

구조화

메인 컴포넌트와 그 하위 컴포넌트들을 명확하게 구조화할 수 있습니다.
각 컴포넌트의 역할이 명확해지고, 코드의 가독성이 향상된다.

유연성

하위 컴포넌트를 쉽게 추가하거나 제거할 수 있으며, 필요에 따라 컴포넌트를 확장할 수 있음. 
특정 하위 컴포넌트를 추가하거나 변경할 때, 메인 컴포넌트의 구조를 크게 변경할 필요가 없음.

객체 기반 접근

Chat.Header, Chat.Footer 등으로 컴포넌트에 접근할 수 있어 코드의 직관성이 높아진다.

 

이렇게 만들어진 Chat 합성컴포넌트는 
나의 경우 ChatMessage라는 컴포넌트로 한 번 더 감싸주었다.

상대방과 나의  메시지 스타일을 달리 해줘야 하는 조건이 있고
map을 통해 반복문 렌더링을 위해서 작성하였다.

(이 부분은 합성컴포넌트 디자인 방식에 맞게 작성한 건지는 좀 의문이다..)