컴파운트 컴포넌트 패턴 (CCP)

원티드 온보딩 챌린지를 참여하며 새로 알게 된 개념인 CCP에 대해 알아보았다.

결국 프론트 엔드 개발을 하며 많은 시간을 할애하는 부분은 코드 구현이 아닌 계획과 설계 그리고 리펙터링인 것 같다.

 

독립적인 컴포넌트 작업으로 얻을 수 있는 여러 이점들이 React를 사용하는 이유라면 장점을 극대화하기 위해선 컴포넌트 하나하나 신중하게 생성해야 할 것이다.

 

바로 이 부분을 염두한 패턴이 CCP가 아닐까 싶다.

 

https://patterns-dev-kr.github.io/design-patterns/compound-pattern/

Compound 패턴

import React from 'react'
import { FlyOut } from './FlyOut'

export default function FlyoutMenu() {
  return (
    <FlyOut>
      <FlyOut.Toggle />
      <FlyOut.List>
        <FlyOut.Item>Edit</FlyOut.Item>
        <FlyOut.Item>Delete</FlyOut.Item>
      </FlyOut.List>
    </FlyOut>
  )
}

 

결과물만 보자면 상태와 데이터를 주고 받는 컴포넌트지만 마치 Router처럼 군더더기 없는 모습이다.

위 페이지에선 Context를 사용해서 설명하고 있으므로 이전에 공부했던 내용을 다시 읽어보았다.

 

https://nonmajor-be-developer.tistory.com/entry/DAY-83-context

[DAY - 83] context

https://nonmajor-be-developer.tistory.com/entry/DAY-84-context-%EC%98%88%EC%A0%9C-useReducer

[DAY - 84] context 예제, useReducer

 

 

1. 폴더 구조

📦 src
 ┣ 📜 FlyOut.js
 ┃   ┣ 📄 FlyOut
 ┃   ┣ 📄 Toggle
 ┃   ┣ 📄 List
 ┃   ┗ 📄 Item
 ┣ 📜 FlyOutMenu.js
 ┣ 📜 Icon.js
 ┣ 📜 Images.js
 ┣ 📜 index.js
 ┗ 📜 styles.css

FlyOutMenu에서 호출하는 FlyOut, Toggle, List, Item 컴포넌트 모두 FlyOut.js에 선언 및 할당되어 있다.

 

2. index.js

import React from "react";
import ReactDOM from "react-dom";

import ImagesList from "./Images";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <div className="App">
    
    // 1) Images에 있는 ImagesList 호출
      <ImagesList />
    </div>
  </React.StrictMode>,
  rootElement
);

 

3. Images.js

import React from "react";
import FlyOutMenu from "./FlyOutMenu";

const sources = [
  "https://images.pexels.com/photos/9...260",
  "https://images.pexels.com/photos/1...260",
  "https://images.pexels.com/photos/1...260"
];

// 3) Image 함수 호출, source를 받아옴
function Image({ source }) {
  return (
  
  // 4) div와 img 태그 생성
    <div className="image-item">
      <img src={source} alt="Squirrel" />
      
      // 5) FlyOutMenu에 있는 FlyOutMenu 호출
      <FlyOutMenu />
    </div>
  );
}

// 1) ImageList 호출
export default function ImageList() {

// 2) sources 배열 map 한 후 Image 함수에 sources를 넘김
  return sources.map((source, i) => <Image source={source} key={i} />);
}

 

4. FlyOutMenu.js

import React from "react";
import "./styles.css";
import { FlyOut } from "./FlyOut";

export default function FlyoutMenu() {
  return (
  
  // 1) FlyOut 컴포넌트 호출
    <FlyOut>
    
    // 2) FlyOut안에 있는 Toggle 컴포넌트 호출
      <FlyOut.Toggle />
      
      // 3) FlyOut안에 있는 List 컴포넌트 호출
      <FlyOut.List>
      
      // 4) FlyOut안에 있는 Item 컴포넌트 호출
        <FlyOut.Item>Edit</FlyOut.Item>
        <FlyOut.Item>Delete</FlyOut.Item>
      </FlyOut.List>
    </FlyOut>
  );
}

 

5. FlyOut.js

import React from "react";
import Icon from "./Icon";

// 1) Context 생성
const FlyOutContext = React.createContext();

// 2) toggle 기능 사용을 위한 Context 생성
export function FlyOut(props) {
  const [open, toggle] = React.useState(false);

  return (
  
  // 3) children으로 value를 넘어주기 위한 공급자 작성
    <div className={`flyout`}>
      <FlyOutContext.Provider value={{ open, toggle }}>
        {props.children}
      </FlyOutContext.Provider>
    </div>
  );
}

// FlyOutContext로 부터 open과 toggle을 받아오며 버튼 클릭 시 toggle 변수를 업데이트
function Toggle() {
  const { open, toggle } = React.useContext(FlyOutContext);

  return (
    <div className="flyout-btn" onClick={() => toggle(!open)}>
      <Icon />
    </div>
  );
}

// FlyOutContext로 부터 open을 받아오며 open이 true일 경우엔 ul 반환
function List({ children }) {
  const { open } = React.useContext(FlyOutContext);
  return open && <ul className="flyout-list">{children}</ul>;
}

// li에 담긴 Edit, Delete 생성
function Item({ children }) {
  return <li className="flyout-item">{children}</li>;
}

// FlyOutMenu.js에서 FlyOut.Toggle, FlyOut.List, FlyOut.Item로 쉽게 접근하기 위해 작성
FlyOut.Toggle = Toggle;
FlyOut.List = List;
FlyOut.Item = Item;

 

6. 결론

import React from 'react'
import { FlyOut } from './FlyOut'

export default function FlyoutMenu() {
  return (
    <FlyOut>
      <FlyOut.Toggle />
      <FlyOut.List>
        <FlyOut.Item>Edit</FlyOut.Item>
        <FlyOut.Item>Delete</FlyOut.Item>
      </FlyOut.List>
    </FlyOut>
  )
}

 

컴포넌트들의 구조와 내용을 모두 확인하면 쉽게 이해할 수 있다.

여러 작은 컴포넌트들을 모아서 하나의 큰 컴포넌트를 만들어 나가는 CCP 방식의 핵심은 재사용성이다.

 

Toggle 방식의 버튼을 다른 컴포넌트에서 구현하고 싶다면 언제든 가져다 쓰면 되는 것이다. 그리고 밖으로 잡다한 코드가 튀어나와 있지 않으니 보기도 좋다.

 

외않되

사실 디자인 패턴이야 뭐로 하든 돌아가기만 하면 되는 거 아냐라고 할 수도 있겠지만... 원티드 챌린지를 포함해 공부를 해보니 크리티컬 한 에러를 잡는 것만큼 중요한 것 같다. 

 

그 에러를 수정하고 테스트하기 쉽게 만드는 것 또한 컴포넌트의 높은 가독성과 높은 응집도 + 낮은 결합도이니 말이다.

 

https://kentcdodds.com/blog/compound-components-with-react-hooks

React Hooks: Compound Components