리액트 디자인 패턴 알아보기

리액트 혹은 vue 프로젝트를 진행하다 보면

폴더 구조도 잡는 거랑 협업을 할 경우 발생하는 이슈들로 일이 힘들어지는 경우가 많습니다

저도.. 회사에서 일할 때 소스코드 충돌을 많이 경험해 보았고요..

 

오늘은 이러한 이슈를 해결하는 방법으로 리액트 디자인 패턴 3가지를 알아보도록 하겠습니다

1. Presentational & Container 디자인 패턴

2. Atomic 디자인 패턴

3. VAC 디자인 패턴

 

먼저 Presentational & Container 디자인 패턴입니다

 

Presentational & Container

Presentational & Container 디자인 패턴은 다름과 같은 특징을 가지고 있습니다

1. 로직을 수행하는 컴포넌트와 , UI를 보여주는 컴포넌트가 분리되어 있는 패턴입니다

2. 같은 state를 다른 container에게 props을 통하여 상태를 공유할 수 있습니다

3. 로직과 UI 부분이 분리되어 있어 유지보수가 쉽고 재사용성이 뛰어납니다

4. 동일한 마크업, 레이아웃을 반복해서 작성하지 않아도 this.props.children으로 구현할 수 있습니다

 

즉 Presentational & Container 디자인 패턴은 로직 컴포넌트와 UI컴포넌트가 분리되어 있는 패턴을 의미합니다

 

Presentational Component

1. 사용자가 보고, 컨트롤하는 컴포넌트입니다(UI관련)

2. state를 직접 조작하지 않으며, container component가 내려준 prop에 함수에 의해 state를 변경합니다

3. 상태를 거의 가지지 않으며, 상태를 가진다면 데이터에 관한 것이 아닌 ui에 관한 것입니다

 

Container Component

1. 동작, 어떤 로직을 수행하는지에 관련 있는 컴포넌트입니다

2. 마크업, 스타일 같은 UI관련된 작업을 하지 않습니다

3. 데이터와 데이터 조작에 관련한 함수를 만들고 present  compoent에 제공합니다

 

Presentational & Container 패턴의 장점

1. 컴포넌트 재사용성을 높일 수 있습니다

2. 컴포넌트 구조에 대한 이해가 쉬워집니다. 기능과 ui가 명확히 분리되어 있기에 코드 구조에 대한 이해가 쉽습니다

3. 반복되는 마크업 작업을 줄여줄 수 있습니다

 

이렇게만 보면 정말 좋은 디자인 패턴이지만

이 패턴 같은 경우는 이 패턴은 만든 Dan Abraomov가 2019년 기준으로 사용하지 말라고 하였습니다

리액트 hook이 없던 시절에는 컴포넌트 간의 의존도가 높아지는 것을 경계하지 않으면 추후 애플리케이션이 비대해졌을 때, 코드의 재사용이 불가능했습니다

이러한 문제를 해결하기 위해 Presentational & Container 패턴이 나왔지만 리액트 hook 등장하여 이러한 이슈들을 해결하였습니다

 

 

Atomic 디자인 패턴

아토믹 디자인 패턴은 최근 리액트를 이용하여 컴포넌트를 개발할 때 떠오르고 있는 디자인 패턴 중 하나입니다.

호율적인 디자인 시스템을 만들기 위해 사용이 되며 아래 5가지로 구성되어 있습니다

1. Atom(원자)

2. Molecule(분자)

3. Organism(유기체)

4. Template(템플릿)

5. Page(페이지)

 

Atom

아톰은 디자인할 수 있는 가장 작은 구성단위를 의미합니다

대표적으로 input, butotn 등과 같은 요소들이 포함이 되며, 마크업만 아니라 color, font style 과같은 스타일들도 아톰으로 분류합니다

 

Molecule

Molecule 은 여러 아톰 요소들을 조합하여 만들어내는 구성단위입니다

즉 아톰이 모아지면 Molecule이 된다고 보시면 됩니다. 일반적으로 card, SearchFiled 같은 구성단위를 의미합니다

 

Organism

Organism은 여러 Molecule과 atom 요소들을 조합하여 만들어내는 구성단위입니다

CardList 혹은 Navigation 등이 Organism으로 분류할 수 있습니다

 

Template

Template는 여러 Organism, Molecule, Atom 요소들을 조합하여 만들어내는 구성단위입니다, page를 구성하기 위한 직전 단계의 컴포넌트입니다

 

Page

Page는 지금까지 나온 모든 구성요소들을 조합하여 만들어내는 구성단위입니다

 

아토믹 디자인의 장점

1. 총 5가지 단계별로 구성된 컴포넌트로 컴포넌트 기준을 명확히 잡을 수 있습니다

2. 컴포넌트가 세부적으로 분류가 되어있어 재사용의 방향을 잡기가 쉽습니다

 

아토믹 디자인의 단점

1. 개발자들의 주관적인 견해가 들어갈 수도 있어 동일한 화면이라도 디자인 구조가 달라질 수도 있습니다

2. 컴포넌트들이 서로 의존되어 있어서 컴포넌트가 하나라도 변경이 된다면 전체적인 디자인 구조를 수정할 수도 있습니다

 

 

VAC패턴

View Asset Component의 약자로 렌더링에 필요한 JSX와 스타일을 관리하는 컴포넌트를 의미합니다

VAC패턴은 View컴포넌트에서 JSX영역을 Props Object로 추상화하고, JSX를 VAC로 분리해서 개발을 진행합니다

 

VAC 패턴 특징

1. 반복 노출, 조건부 노출, 스타일 제어와 같은 렌더링에 관련된 처리만 수행합니다

2. props를 통해서만 제어가 되고 상태를 관리하거나 변경하지 않는 컴포넌트입니다

3. 이벤트 함수를 바인딩할 때 어떠한 추가처리도 하지 않습니다

 

VAC패턴 같은 경우는 도입을 한다면 UI테스트가 편리합니다,

VAC는 오직 렌더링 관련된 부분만 처리하기에 UI관련한 테스트가 간편해집니다

그러나 props를 통해서 렌더링이 되기 때문에 props가 비대해질 수도 있습니다

 

VAC패턴은 예제로 한번 보도록 하겠습니다

https://github.com/jungHyeonS/react-vac

GitHub - jungHyeonS/react-vac

 

우선 VAC패턴을 사용하지 않은 컴포넌트입니다

기능을 수행하는 로직과 렌더링을 처리하는 JSX가 같은 파일에 존재합니다

import React from "react";
import { useState } from "react";

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

  return (
    <div>
      <button onClick={() => setValue(value - 1)}>-</button>
      <span>{value}</span>
      <button onClick={() => setValue(value + 1)}>+</button>
    </div>
  );
}
export default SpinBox;

 

이러한 컴포넌트를 VAC패턴으로 변경하면 아래와 같습니다

로직을 처리하는 부분을 작성하고 Props Object를 추상화하여 VAC 컴포넌트에 전달합니다

VAC컴포넌트는 받은 Props를 렌더링 하는 역할을 하고 있습니다

import React from "react";
import { useState } from "react";
import VSpinBox from "./VSpinBox";

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

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

  return <VSpinBox {...props}/>;
}
export default SpinBox;

interface VSpinBoxProps {
  value : number,
  onDecrease : () => void,
  onIncrease : () => void
}

const VSpinBox = ({value,onDecrease,onIncrease}:VSpinBoxProps) => {
  return (
    <div>
      <button onClick={onDecrease}>-</button>
      <span>{value}</span>
      <button onClick={onIncrease}>+</button>
    </div>
  )
}

export default VSpinBox;

 

 

이렇게 보면 위에서 보았던 Persentational & Container 패턴과 유사해 보이기에 차이점을 알아보도록 하겠습니다

Persentational & Container 와의 차이점

Persentational & Container

1. 비지니스 로직과 View의 관심사 분리가 목적입니다

2. Container 컴포넌트에서 비지니스 로직을 관리하고 Persentational  컴포넌트를 제어합니다

3. Persentational 컴포넌트는 View 로직(상태관리, UI)과 렌더링을 담당합니다

 

VAC

1. View 로직(상태관리, UI)과 렌더링(JSX)의 관심사 분리가 목접입니다

2. View 컴포넌트가 VAC의 Container 역할을 하며 JSX를 추상화한 Props Object를 관리하여 VAC를 제어합니다

3. VAC는 JSX, style을 관리하여 렌더링만 처리를 진행합니다

 

 

 

 

 

참고자료

https://tecoble.techcourse.co.kr/post/2021-04-26-presentational-and-container/

presentational and container 패턴이란 무엇인가

https://jforj.tistory.com/274

[React] 아토믹 디자인(Atomic Design) 을 이용한 컴포넌트 개발

https://wit.nts-corp.com/2021/08/11/6461

React에서 View의 렌더링 관심사 분리를 위한 VAC 패턴 소개 | WIT블로그