React 디자인 패턴

디자인 패턴이란
프로그램을 개발하는 과정에서 사용되는 설계 패턴들을 정의한 것입니다.

1. Presentation & Container
React 디자인 패턴 중 가장 기본적인 패턴으로, 데이터 로직을 수행하는 Container 컴포넌트와 데이터를 출력하는 Presentation 컴포넌트를 분리하여 구현하는 디자인 패턴

Container 컴포넌트
- API호출, State 관리, 이벤트 처리 등의 작업을 수행하는 컴포넌트 입니다.
- 변경된 상태 값을 props를 통해 Presentation 컴포넌트로 전달해줍니다.

Presentation 컴포넌트
- UI를 표시하는 컴포넌트입니다.
- 직접 상태값을 관리하지 않고 Container 컴포넌트가 전달해준 props를 받아 출력합니다.

특징
- 컴포넌트간 의존도가 낮고, Presentation 컴포넌트를 재사용 할 수 있습니다.
- 컴포넌트별 역할이 명확하여 코드 구조를 이해하기 쉽습니다.
- state를 여러 컴포넌트에 props로 전달하여 상태를 공유할 수 있습니다.

예제

// Presentation Component
function SearchFormView() {

    const {searchKey, onChange, onSubmit} = props;

    return (
        <form onSubmit={onSubmit}>
            <div>
                <label>제목</label>
                <input type="text" value={searchKey} onChange={onChange} name="searchKey"/>
                <button type="submit">검색</button>
            </div>
        </form>
    )
}
export default SearchFormView;

Custom Hooks
로직을 Hooks로 분리하여 관리하는 디자인 패턴

특징
- 여러 컴포넌트에서 동일한 로직을 공유할 수 있습니다.
- 컴포넌트의 제어가 쉬워지고 사용자가 더 많은 통제권을 가질 수 있습니다.
- 로직이 렌더링과 분리되어있어 이를 올바르게 연결하려면 컴포넌트의 동작방식에 대한 깊은 이해가 필요합니다.

예제

function SearchForm() {

    const { searchKey, onChange, onSubmit } = useSearch();

    return (
        <form onSubmit={onSubmit}>
            <div>
                <label>제목</label>
                <input type="text" value={searchKey} onChange={onChange} name="searchKey"/>
                <button type="submit">검색</button>
            </div>
        </form>
    )
}

export default SearchForm;

Atomic
컴포넌트의 재활용을 최대화하기 위한 방법론으로, 아토믹이라는 이름에서 알 수 있듯 원자 개념을 사용한 디자인 패턴
가장 작은 컴포넌트인 원자부터 분자, 유기체, 템플릿, 페이지까지 구분해서 사용

아토믹 디자인의 구성

원자 : UI를 구성하는 가장 작은 요소. ex) 버튼, 아이콘, 입력, 라디오, 텍스트
분자 : 여러개의 원자를 조합하여 형성한 컴포넌트. 용도가 명확하면서도 재사용성을 가지고 있음 ex) 입력 폼, 네비게이션
유기체 : 분자들이 결합되어 형성된 컴포넌트. 재사용성 고려하지 않음. ex) 헤더, 푸터
템플릿 : 유기체들이 모여 배치함으로써 페이지 구조나 레이아웃 구성 등을 나타냄.
페이지 : 템플릿에 실제 데이터가 반영된 상태로, 작성한 컴포넌트가 올바르게 작동하는지 확인하는 완성된 하나의 페이지

장점
- 컴포넌트 재사용성 극대화
- 컴포넌트의 계층 구조를 알아보기 쉬워 설계 변경이 필요할 시 빠르게 대처 가능
- 디자인 요소가 재사용될 컴포넌트에 일괄로 적용되므로 styles 적용 및 변경이 쉬움

단점
- 컴포넌트가 적절하게 분리되지 않으면 오히려 컴포넌트의 복잡도가 높아져 유지보수가 까다로움
- Page부터 Atom까지 props drilling이 일어날 수 있음.

VAC (View Asset Component)
JSX와 Style을 관리하여 UI와 비즈니스 로직을 분리하는데 목적을 둔 컴포넌트 설계 방법론

특징
- 반복이나 조건부 노출, 스타일 제어와 같은 렌더링과 관련된 처리만을 수행합니다.
- 오직 props를 통해서만 제어되며 스스로의 상태를 관리하거나 변경하지 않는 stateless 컴포넌트입니다.
- 이벤트에 함수를 바인딩할 때 어떠한 추가 처리도 하지 않습니다.

예제

const SpinBoxView = ({ value, onIncrease, onDecrease }) => (
  <div>
    <button onClick={onDecrease}>-</button>
    <span>{value}</span>
    <button onClick={onIncrease}>+</button>
  </div>);

const SpinBox = () => {
  const [value, setValue] = useState(0);

  const SpinBoxProps = {
    value,
    onDecrease: () => setValue(value - 1),
    onIncrease: () => setValue(value + 1),
  };

  // JSX를 VAC로 교체
  return <SpinBoxView {...SpinBoxProps} />;
};

정리
디자인 패턴은 다양하고 각각의 장단점이 있으므로, 진행하는 프로젝트와 잘 맞는지 고민 후 적용을 해야합니다.