리액트 패턴 | Compound Components Pattern

리액트는 매우 자유로운 라이브러리로 꼽힌다.

그렇기 때문에 리액트가 나온 이후로 다양한 패턴들이 등장하였고 연구되고 있다.
다양한 패턴들이 있지만, 최근 많이 사용하고 있는 패턴인 Compound Components Pattern에 대해 소개해보려고 한다.

---

예시

import type { ReactNode } from 'react';

import Buttons from './Buttons';
import Comment from './Comment';
import Title from './Title';

interface Props {
  children: ReactNode;
}

const Post = ({ children }: Props) => {
  return <div>{children}</div>;
};

Post.Title = Title;
Post.Comment = Comment;
Post.Buttons = Buttons;

export default Post;

// Full Post
<Post>
    <Post.Title />
    <Post.Comment />
    <Post.Buttons />
</Post>

// Post without comment
<Post>
    <Post.Title />
    <Post.Buttons />
</Post>

첫번째 코드는 하위 컴포넌트를 담고 있는 상위 컴포넌트의 코드이고,
두번째 코드는 이 코드를 사용하고 있는 코드이다.

장점

- 자유로운 커스터 마이징
위 예시에서도 볼 수 있듯이 이 패턴을 사용하게 되면 하위 컴포넌트를 자유롭게 넣거나 뺄 수 있다.

- Props Drilling 해결
Props Drilling?
상위 컴포넌트가 State를 연쇄적으로 하위 컴포넌트로 넘겨주는 문제를 말함

필자가 생각하는 이 패턴의 가장 큰 장점이라고 생각하는데,
이 패턴을 사용하게 되면 아래 코드 처럼 Props Drilling을 해결할 수 있게 된다.

// Full Post
<Post theme={'dark'}>
    <Post.Title value={'제목입니다'} />
    <Post.Comment author={'작성자'} value={'댓글내용'} />
    <Post.Buttons />
</Post>

위 코드 처럼 직접 Post라는 컴포넌트를 사용하는 쪽에서 props를 지정해서 넣어줄 수 있게 되는데,

만약 이 패턴을 사용하지 않았다면, 상위 컴포넌트(Post)에서는 필요 없는 props를 직접 받아 넘겨주거나,
redux를 사용해야 했을 것이다.

하지만 이 코드를 보면 직접 각 컴포넌트에 필요한 props를 직접 넣어주기 때문에 문제를 해결함과 동시에 코드의 가독성도 올릴 수 있다.

단점

- 어려운 설계
이 패턴을 사용했을 때 상위 컴포넌트에서는 특정 하위 컴포넌트가 없어도 정상적으로 보여야하고 작동해야 한다.
말이 쉽지 모든 케이스에서 컴포넌트가 정상적으로 작동하는 건 매우 어렵다.

그렇기 때문에 일반적으로 설계할 때보다 훨씬 시간과 노력을 많이 필요로 한다.

 

코드 첨부

https://github.com/bysxx/next-ts-template/blob/master/components/CompoundExample/Post.tsx

 

위 링크에서 위에서 설명한 패턴을 사용한 예시를 볼 수 있다.