디자인 패턴은
- 소프트웨어 설계에서 반복되는 문제를 최적화된 방식으로 해결할 수 있는 방법을 제공한다.
- 개발 프로세스의 속도를 높일 수 있으며, 효과적으로 설계할 수 있다.
현재 회사에서 주로 사용하는 패턴 중 이번에 공부하게 된 패턴은
첫번째, Container/Presentational Pattern
비즈니스 로직으로부터 뷰를 분리하여 관심사의 분리(Seperation Of Concern)를 강제하는 방법이다.
여기서 관심사의 분리란 뭘까?
- 시스템 내부에서 질서를 달성하기 위해 소프트웨어 요소의 상관관계와 설계를 적용하는 것으로
- 복잡성 관리에 용이하다.
이점으로는
- 개별 컴포넌트의 복제 없어짐 → 단일화 → 유지보수성 증대 → 안정적인 서비스 → 확장가능성 증대로 이어져 시장성, 시스템 채택률에 큰 영향을 준다.
- 또한, 팀 간의 필요한 협력 최소화, 회사 전체 시스템 내 문제 해결력 향상, 문제 파악 용이, 해결 속도 빨라짐 → 프로세스의 퀄리티 및 잠재력 끌어올릴 수 있음 → 전체 비즈니스 목표 달성 용이하다.
먼저 Presentational Components는
- 데이터가 어떻게 사용자에게 보여질 지에 대해서만 다루는 컴포넌트이다.
- UI(스타일 시트 포함)를 담당하는 순수함수로 작성된다.
- 데이터 변경 없이 화면에 출력할 수 있으므로 앱의 여러 곳에서 다양한 목적으로 재사용할 수 있고,
- props를 통해 데이터를 받는다.
- 쉽게 수정 가능하고 테스트 용이하다.
Presentational Components을 감싸는 Container Components는
- 어떤 데이터가 보여질 지에 대해 다루는 컴포넌트로
- Presentational 컴포넌트에 데이터를 전달하는 역할을 한다.
- 상태와 기타 데이터를 책임지게 된다.
Container/Presentational 패턴은 React Hooks로 대체 가능한데,
- Container → Hook으로 만들어 Presentational에서 Hook을 직접 호출해 사용할 수 있다.
- 따라서, 불필요한 Container 래핑을 줄일 수 있다.
그 Hooks가 내가 아는 그 Hook인가?
두번째, Hooks Pattern에 대해 알아보자.
Hooks는 React의 상태와 생명 주기 함수들을 ES2015의 클래스를 사용하지 않고 쓸 수 있게 해 준다.
ES2015의 클래스
재설계의 어려움, 복잡도 향상으로 인한 디버깅과 성능 최적화의 어려움, 사이드 이펙트 등의 문제를 해결하기 위해 React에서는 Hooks를 추가했다. 다음은 Hooks의 기능이다.
- 함수형 컴포넌트에 상태를 추가한다.
- componentDidMount 혹은 componentWillUnmount 와 같은 메소드 없이 컴포넌트의 생명 주기를 관리할 수 있다.
- 컴포넌트에서 재사용이 가능하다.
React에서 주로 사용하는 Hooks들은
useState, useEffect, useReducer, useRef, useContext, useMemo useCallback 등이 있다.
이런 Hook의 장점은
코드가 간결하다. 생명 주기와 분리되어 있어 코드들을 관심사에 따라 분리가 가능하다. 상태를 가진 로직을 재사용 할 수 있으며, 에러를 발생시킬 확률을 낮춘다.
반면,
규칙에 따라 작성해야하며, 올바른 사용법을 익히고 사용해야한다. useCallback , useMemo 를 잘못 사용할 수 있다.
(참고: useCallback과 useMemo 사용에 대한 유명한 글)
이를 바탕으로 이 패턴을 어떻게 이용하여 회사 코드가 짜여졌는지 살펴 볼 차례다. 오늘 새롭게 알게된 사실은 Return Early Pattern도 디자인 패턴의 일종이라는 것이다. 넓게 보면 코딩 컨벤션도 일종의 디자인 시스템이 될 수 있겠구나 라는 생각을 했다. 앞으로 공부해야할 디자인 패턴이 많다. 🙌🏻
참고 문서
항상 좋은 글 감사합니다.