React 3회차: SOLID한 컴포넌트 만들기

1. SOLID 원칙

지난 시간에 공부했던 ‘비즈니스 로직’, ‘캡슐화’, ‘모듈성, ‘추상화’ 등을 이번에 배우는 SOLID라는 개념으로 더 확실하게 정리해보자.

SOLID 원칙을 프론트엔드에 적용하면 단순 하드 코딩이 아닌 쉽게 유지보수 할 수 있으며 재사용성이 높은 코드를 만들 수 있게 해준다.

1.1 SOLID 원칙 이란

SOLID 원칙은 5개의 원칙으로 이루어진 개념이다.

1. SRP 단일 책임 원칙
   단일 책임 즉, 하나의 요소가 하나의 변경이유를 갖게하라
   로직 관리에 대한 것은 설계 단계 부터 소통을 통해 확립하자.
   
2. OCP 개방-폐쇄 원칙
   기존 코드를 수정하기 보다 새로운 코드를 추가해 코드 변경에 용이하게 설계(ex. CCP)
   
   
3. LSP 리스코프 치환 원칙
   관리 차원에서 라이브러리 등 변할 수 있는 요인으로 인해 코드를 대체 하더라도 본연의 기능을 유지하는 원칙
   
   
4. ISP 인터페이스 분리 원칙
   컴포넌트 혹은 함수에 로직에 각 사용에 맞는 필요한 인터페이스(prop)만 넘기는 원칙
   
   
5. DIP 의존성 역전 원칙
   구현 로직 내부가 아닌 외부에서 추상적으로 정보를 받아 사용하는 방법

 

SOLID원칙중 중요한 원칙을 뽑아보자면, 중요한 순으로 SRP와 OCP, DIP 이다. 추가적으로 IoC 또한 중요하다.

IoC는 제어의 역전이라는 뜻으로 콜백 등의 패턴을 사용해 함수 외부에서 제어할 수 있게 하는 방법이다. (prop으로 콜백 함수를 사용하는 것, 메서드를 이용하며 내부 콜백을 이용하는 것도 포함된다.)

 

 

2. React Component Patterns

1) 컴파운드 컴포넌트 패턴 (Compound Components Pattern)

CCP는 OCP에서 예를 들었다.

수정보다는 추가하는 방식으로 확장할 수 있도록 하는 원칙이며, 이는 CCP의 내부 컴포넌트를 생성하는 모습을 보면 이해하기 쉽다.

const TestDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger />
    <Dialog.Portal>
      <Dialog.Overlay />
      <Dialog.Content>
        <Dialog.Close />
      </Dialog.Content>
    </Dialog.Portal>
  </Dialog.Root>
);

추가적인 CCP에 대한 정보는 링크를 확인하자.

2) Children Props

컴포넌트 내부에 구현하기 보다 제어권을 컴포넌트 외부로 넘겨 합성하는 컴포넌트 패턴.

앞에서 살펴보았던 <VisibleTrigger /> 컴포넌트가 이 패턴에 해당하는 구현입니다.

const App = () => {
  return (
    <div>
      <TestButton onClick={() => {
          console.log("test is ok");
          ...
        }}>     
        ...
      </TestButton>
      ...
    </div>
  );
};

export default App;

3) Render Props

컴포넌트의 children prop 자리에 함수를 전달하고, 내부에서는 전달 받은 함수의 인자로 값을 전달하는 패턴

 

참고 자료

• 합성 컴포넌트로 재사용성 극대화하기
• 이제부터 이 컴포넌트는 제 겁니다
• 단단한 컴포넌트 부수기(feat. 조합, IoC)
• 5 Advanced React Patterns
• Reusable Modals with Radix UI
• 프론트엔드와 SOLID 원칙