디자인 패턴

패턴 자체를 신경쓰지 않고 규모나 컴포넌트 성격에 따라 방식을 다르게 썼던지라 딱히 의식하진 않았는데
다시 패턴이 대두 되고 있는거 같아 기록을 남긴다.

VAC 패턴

작년에 사용하려 했던 VAC 패턴.
렌더링과 이벤트를 분리해서 이벤트 컴포넌트에서 렌더링을 렌더링용 컴포넌트를 import 해서 사용.

// 렌더링
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 props = {
    value,
    onDecrease: () => setValue(value - 1),
    onIncrease: () => setValue(value + 1),
  };

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

컴포넌트를 기본적으로 이렇게 짜려고 했었지만 파일수가 늘어나고, 이벤트를 다른 파일을 열어가며 확인해야하는 불편함이 있었다.

하지만 ui 수정과 이벤트 수정이 별도의 파일이라 동시에 수정이 필요할때는(그럴일이 잘 있지도 않았음) 편리했다.

합성 컴포넌트 패턴

필요하다면 사용했던 패턴.

// Counter.js
import { createContext, useState } from "react";
import CounterButton from "../item/CounterButton";
import CounterStatus from "../item/CounterStatus";
import './numberInput.scss';

export const CounterContext = createContext({
  value: 0,
  increment: () => {},
  decrement: () => {},
});

const Counter = ({ children, initValue = 0, minimum, maximum }) =>{
  const [count, setCount] = useState(initValue);

  const increment = () =>
    setCount((prev) => {
      if (maximum === undefined) {
        return prev + 1;
      } else {
        return prev < maximum ? prev + 1 : prev;
      }
    });

  const decrement = () =>
    setCount((prev) => {
      if (minimum === undefined) {
        return prev - 1;
      } else {
        return prev > minimum ? prev - 1 : prev;
      }
    });

  return (
    <CounterContext.Provider value={{ value: count, increment, decrement }}>
      <div className="number-input">{children}</div>
    </CounterContext.Provider>
  );
}

Counter.Button = CounterButton;
Counter.Status = CounterStatus;

export default Counter;

// useCounter.js
import { useContext } from "react";
import { CounterContext } from "../container/Counter";

function useCounter() {
  const value = useContext(CounterContext);
  if (!value) {
    throw Error("Conuter Context가 없습니다.");
  }
  return value;
}

export default useCounter;

//사용
<Counter initValue={0} minimum={0} maximum={100}>
  <Counter.Button type="decrement">-</Counter.Button>
  <Counter.Status />
  <Counter.Button type="increment">+</Counter.Button>
</Counter>

렌더링의 순서 및 렌더링 자체의 틀을 만들때는 좋은 패턴.
이 코드에서 렌더링만 할 경우에는 단순히 object.assign으로만 묶어주면된다.

이벤트가 없는 모달이나 다이아로그 같은 화면에서 title, content, buttons 로 묶어주며 사용하기에는 좋았다.

참고 : https://fe-developers.kakaoent.com/2022/221110-ioc-pattern/

 

이제부터 이 컴포넌트는 제 겁니다 | 카카오엔터테인먼트 FE 기술블로그

그 외의 컨테이너 패턴은 context api도 단점이 많아 주력으로 사용하면 힘들다는 의견이 많은것처럼 컨테이너 패턴도 마찬가지로 단점이 너무 많은 패턴이고..

 

props 패턴은 기본적으로 사용하는 패턴이다.

리덕스 패턴을 포함한 이런 패턴들은 설계의 관점에서 보고 필요한 곳에 적절히 사용하는 편

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
이름만 알고있는 패턴들

 

SAM 패턴 [샘 패턴]
싱글톤 패턴 - http://blog.javarouka.me/2012/02/javascripts-pattern-1-singeton-patterrn.html
Observer 패턴 [ 옵저버 ]
Pub-Sub 패턴(논문/구독) -
FLUX 패턴
adapter 패턴
facade 패턴
decorator 패턴
팩토리(factory) 패턴
스트레티지
커맨드 - https://dailyheumsi.tistory.com/217
빌더 패턴