우선 React Hook 작성에 앞서 Solid 원칙이 무엇인지 간단하게 알아보고 가도록 한다.
객체 지향 설계의 5원칙 S.O.L.I.D
SOLID원칙이란 객체 지향 설계에서 지켜줘야 할 5개의 소프트웨어 개발 원칙을 말한다.
- SRP(Single Responsibility Principle) - 단일 책임 원칙
- OCP(Open Closed Principle) - 개방 폐쇄 원칙
- LSP(Listov Substitution Principle) - 리스코프 치환 원칙
- ISP(Interface Segregation Principle) - 인터페이스 분리 원칙
- DIP(Dependency Inversion Principle) - 의존 역전 원칙
이 중 먼저 SRP를 적용한 React Hook 예시를 살펴 보자.
단일 책임 원칙(Single Responsibility Principle)
모듈은 단 하나의 액터만 담당해야 한다.
이 Hook은 단일 책임 원칙(SRP)을 준수하지 않으므로 SOLID 하지 않는다. user 데이터를 가져오는 책임과 todo 데이터를 가져오는 책임 두 가지를 모두 가지고 있기 때문이다.
대신 위의 코드를 user에 대한 데이터를 가져오는 훅과 todo 데이터를 가져오는 훅으로 분리해야 한다.
위 원칙은 모든 Hook과 컴포넌트에 적용되며 모두 각각 한 가지 일만 해야한다. 이 원칙을 적용할 때 고려해야할 사항은 다음과 같다.
1. UI를 표시해야 하는 컴포넌트인가? 아니면 로직을 처리해야하는 컴포넌트 인가?
2. 이 Hook은 어떤 단일 유형의 데이터를 처리해야 하는가?
3. 이 Hook 또는 컴포넌트는 어떤 Layer에 속하는가?
위 고려사항에 대해 같은 답변을 하지 못하는 Hook을 만들고 있다면 SRP 원칙을 위반하고 있다는 것이다!
React에서 SRP를 사용하는 이유는 무엇일까?
SRP는 실제로 React와 잘 어울린다. React는 컴포넌트 기반 아키텍처를 따르며, 이는 작은 컴포넌트들이 함꼐 모여 애플리케이션을 구성할 수 있도록 구성된 아키텍처를 의미한다. 컴포넌트의 크기가 작을수록 재사용할 수 있는 가능성이 높아진다.
이러한 이유 때문에 React는 SRP에 기반을 두고 있다. 이 원칙을 따르지 않으면 항상 새로운 Hook과 컴포넌트를 작성해야하고 재사용할 수 없다.
또한 SRP를 따르지 않으면 코드를 테스트하기 어려워진다.
점진적 과부하