컴포넌트의 책임?

이번에 프로젝트를 진행하면서, 상품 등록이나 사용자 간 채팅에 이미지 업로드 기능이 필요하게 되었다.

 

이미지를 업로드하는 순간 비동기적으로 Amazon S3에 파일을 먼저 업로드하고,

상품 등록 (게시글 등록) 을 하거나 채팅을 전송할 때 반환된 이미지 ID를 포함해 요청하는 식으로 플로우를 설계했다.

 

그래서 S3에 이미지를 업로드하고, Progress Bar 표시나 프리뷰 이미지 표시를 대신해줄 ImageUploader 컴포넌트를 직접 만들었고, 컴포넌트 외부에서 이미지를 관리하도록 이벤트 기반으로 구현했다.

interface ImageUploaderProps {
  children?: ReactNode;
  className?: string;
  disabled?: boolean;
  onUploadRequested?: () => void;
  onUploadComplete?: (response: AxiosResponse) => void;
  onError?: (error: Error | unknown) => void;
  onRemove?: () => void;
}

구현된 컴포넌트

 

그런데 이렇게 컴포넌트를 작성하니, 채팅 기능쪽에서는 이미지 단일 업로드만 지원하기 때문에 굳이 컴포넌트의 프리뷰를 사용하지 않고, 이미지를 선택하면 다른 레이아웃으로 크게 선택한 이미지를 보여준 뒤 업로드하는 것을 희망했다.

 

결국 이번 프로젝트에서는 채팅 기능을 개발하는 쪽에서 컴포넌트를 숨기고 받아온 이미지를 표시하는 방식으로 억지로 컴포넌트를 사용했는데, 리팩토링을 진행하게 된다면 ImageUploader는 정말 이미지 업로드라는 기능만 수행하고, 프리뷰가 필요하다면 따로 렌더링하도록 하는 것이 SRP (단일 책임 원칙) 을 위반하지 않는 바람직한 컴포넌트 구현 방식이라는 것을 깨달았다.