이제 PostActionButtons 컴포넌트를 PostViewer의 PostHead 하단에서 보여 주어야 합니다. 그런데 이 컴포넌트를 PostViewer에서 직접 렌더링하면, 나중에 PostActionButtons에 onEdit, onRemove 등의 props를 전달할 때 무조건 PostViewer를 거쳐서 전달해야 합니다. 정작 PostViewer 내부에서는 사용하지 않지만 내부의 컴포넌트에서 필요하기 때문에 한 번 거쳐 전달하는 것은 조금 불편합니다.

// PostViewerContainer에서 렌더링할 때:
<PostViewer (...) onEdit={onEdit} onRemove={onRemove} />
// PostViewer에서 렌더링할 때:
<PostActionButtons onEdit={onEdit} onRemove={onRemove} />

이 방법이 틀린 것은 아니지만, 자칫하면 컴포넌트가 받아 오는 props가 너무 많아져서 관리하기가 어려워질 수 있습니다.

이렇게 컴포넌트를 거쳐서 props를 전달하는 것이 싫다면, 그 대신 두 가지 방법을 고려할 수 있습니다. 첫 번째 방법은 PostActionButtons의 컨테이너 컴포넌트를 만들고 PostViewer 내부에서 바로 렌더링하는 것입니다. 두 번째 방법은 props를 JSX 형태로 받아 와서 렌더링하는 것입니다. 다음과 같이 말이죠.

<PostViewer
  post={post}
  loading={loading}
  error={error}
  actionButtons={<PostActionButtons onEdit={onEdit} onRemove={onRemove} />}
/>

우리는 두 번째 방법으로 구현하겠습니다. 두 번째 방법은 굳이 컨테이너 컴포넌트를 새로 만들 필요 없이 기존 PostViewerContainer에서 필요한 로직을 작성하면 되기 때문입니다.