[React] SOLID 원칙 적용 컴포넌트 리팩토링

📌 SOLID 원칙에 맞게 컴포넌트 리팩토링

평소에 내 코드는 왜 가독성이 좋지 못할까? 

왜 내 코드는 이렇게 길지? 

라는 생각을 했었는데 컴포넌트 설계 방식을 바꾸니 좀 더 읽기 쉽고 책임 분할된 좋은 코드를 설계할 수 있게 되어서 쓰는 후기입니다.

만약 저와 같이 생각하시는 분들이 있다면 한번 봐주시면 좋을 거 같습니다. 

 

- SRP (Single Responsibility Principle) 단일 책임 원칙

단일 책임 원칙이란 쉽게 말해서 코드는 하나의 작업을 해야 한다라고 볼 수 있습니다.

하지만 그전에 제가 짜던 코드를 보면 컴포넌트 자체에서 여러 가지 로직을 돌면서 UI로직까지 행하고 있다는 것을 알 수 있습니다. 

밑에 예시가 책임 분할되기 전 코드입니다.

 

코드를 보면 CouponList 컴포넌트는 서버에서 데이터도 패칭 하고, 그 패칭 된 데이터로 화면은 렌더링 하는 것을 확인할 수 있습니다.

쉽게 말해서 이 컴포넌트는 2가지 역할을 하고 있습니다.

1. 서버에서 쿠폰 데이터를 가져온다.

2. 가져온 데이터로 화면을 렌더링 한다.

function CouponList({ handleSelectCoupon }: Props) {
  const [coupons, setCoupons] = useState<Coupon[]>([]);

  useEffect(() => {
    getCoupons().then((res) => setCoupons(res));
  }, []);

  return (
    <Block>
      {coupons.map((coupon, i) => (
        <CouponItem
          key={i}
          title={coupon.title}
          onClick={() => handleSelectCoupon(coupon)}
        />
      ))}
      <CouponItem title="취소하기" onClick={() => handleSelectCoupon(null)} />
    </Block>
  );
}

하지만 useEffect, useState가 있는 부분은 hook으로 뺄 수 있습니다.

그래서 hook으로 분리를 하면 아래와 같은 코드가 됩니다.

 

즉 서버에서 데이터를 패칭 하는 역할은 useGetCoupons 훅에게 위임하고 List는 데이터를 가지고 화면을 그리는데 집중할 수 있도록 역할 분리를 해준 것입니다.

이렇게 했을 책임 분리로 인한 가독성이 올라가고 역할별 테스팅 하기도 용이해집니다.

function CouponList({ handleSelectCoupon }: Props) {
  const { coupons } = useGetCoupons();
  return (
    <Block>
      {coupons.map((coupon, i) => (
        <CouponItem
          key={i}
          title={coupon.title}
          onClick={() => handleSelectCoupon(coupon)}
        />
      ))}
      <CouponItem title="취소하기" onClick={() => handleSelectCoupon(null)} />
    </Block>
  );
}

function useGetCoupons() {
  const [coupons, setCoupons] = useState<Coupon[]>([]);

  useEffect(() => {
    getCoupons().then((res) => setCoupons(res));
  }, []);

  return {
    coupons,
  };
}

 

- OCP (Open Closed Principle) 개방 폐쇄 원칙

개방 폐쇄 원칙이란 확장에는 열려있어야 하지만 변경에는 닫혀있어야 한다 라는 원칙인데요

코드로 봐보겠습니다.

function QuantityButton({ mode, onClick }: Props) {
  return (
    <CountButton onClick={onClick}>
      {mode === 'plus' ? <AiOutlinePlus /> : <AiOutlineMinus />}
    </CountButton>
  );
}

위 코드는 아이콘이 Plus, Minus아이콘으로 한정되어 있습니다.

즉 확장에 닫혀있다는 뜻이죠

위 코드에 확장성을 올리려면 어떻게 해야 할까요??

 

아이콘을 버튼 안에서 정의하는 게 아니라 바깥에서 주입받으면 됩니다.

즉 아래와 같은 코드가 되는 것이죠.

function QuantityButton({ icon, onClick }: Props) {
  return <CountButton onClick={onClick}>{icon}</CountButton>;
}

즉 이제 아이콘이 두 개로 한정되어 있는게 아니라, 바깥에서 프롭스로 넘겨받기 때문에 두개로 한정된 게 아니라 여러 가지 아이콘을 적용할 수 있습니다. 

또한 이 컴포넌트 내부에서 아이콘을 바꿀 필요가 없으므로 확장에는 용이하고 변경에는 닫혀있는 원칙이 적용된 것입니다!

 

- ISP (Interface Segregation Principle) 인터페이스 분리 원칙

인터페이스 분리 원칙이란 사용하지 않는 인터페이스에 의존하면 안 된다는 내용인데요.

밑에 코드를 예시로 봐보겠습니다.

 

밑에 체크박스 컴포넌트는 8개의 product 타입을 받아서 그중 product.item_no, product.checked 속성 두 개만 사용하고 있습니다.

interface CartProduct {
  item_no: number;
  item_name: string;
  detail_image_url: string;
  price: number;
  score: number;
  availableCoupon?: boolean;
  quantity: number;
  checked: boolean;
}

interface Props {
  product: CartProduct;
  onClick: () => void;
}

function CheckBox({ product, onClick }: Props) {
  const uniqueID = `checkbox-${product.item_no}`;
  return (
    <Block>
      <input
        id={uniqueID}
        type={'checkbox'}
        defaultChecked={product.checked}
        onClick={onClick}
      ></input>
      <label htmlFor={uniqueID}></label>
    </Block>
  );
}

즉 사용하지 않는 인터페이스가 너무 많은 것이죠.

그러면 어떻게 해야 할까요? 

꼭 필요한 인터페이스만 넘겨받으면 됩니다.

interface Props {
  item_no: number;
  checked: boolean;
  onClick: () => void;
}

function CheckBox({ item_no, onClick, checked }: Props) {
  const uniqueID = `checkbox-${item_no}`;
  return (
    <Block>
      <input
        id={uniqueID}
        type={'checkbox'}
        defaultChecked={checked}
        onClick={onClick}
      ></input>
      <label htmlFor={uniqueID}></label>
    </Block>
  );
}

이제 위에 체크박스는 안 쓰는 인터페이스 없이 필요한 인터페이스만 의존해서 사용되고 있습니다.

 

이번 포스팅에서는 제가 SOLID 원칙을 공부해 가면서 적용한 내용을 블로깅 했는데요.

이번에 공부하면서 어떻게 컴포넌트를 설계해야 하는지 견문을 넓힐 수 있는 좋은 공부 기회였습니다.

그래서 저처럼 컴포넌트 설계에 대해서 고민 중이신 분들이라면 한번 SOLID원칙을 공부해가면서 적용해 봐도 좋을 거 같습니다.