GoF 디자인 패턴을 React 에 적용할 수 있을까?

문득 제목에 적은 질문이 떠올라서, 그에 따른 생각을 정리해본다.
질문이 떠오른 이유는, React 로 문제를 해결하던 중, Design Pattern 의 전략패턴이 떠올랐기 때문이다.

결론부터 말하자면, JavaScript를 위한 Design Pattern이 있다.
비 커머셜이라 언제든지 봐도 무방할 듯 하다.

Learning JavaScript Design Patterns

GoF는 23개 패턴이지만 위 문서는 JS에 맞는 패턴을 따로 소개하고 있다.

• JavaScript 디자인 패턴 13개 + Namespace 패턴 1개
• JavaScript MV* 디자인 패턴 3개
• Modern Modular JavaScript 디자인 패턴 3개
• JQuery 디자인 패턴 8개 + JQuery 플러그인 패턴 1개

또 JS와 별도로 React에는 React에 맞는 설계 패턴이 있다.

유용한 리액트 패턴 5가지(한글)

아래는 생각했던 흔적이 아까워 남겨두는 글.

디자인 패턴 자체가 쉬운 유지보수를 위해 적용하는건데.
나는 JAVA를 통해 Design Pattern 을 배웠기 때문에 내장 interface가 없는 JavaScript 에 적용할 방법을 찾아야 한다.
정석적으로 써보려고 한다면 필요한 키워드는 아래 2개일 것이다.

• Prototype
• TypeScript

별로 쉬워보이지 않고 다른 React 개발자들과 문제를 해결하는 방법의 결이 다를 것 같다.

잠깐! 오컴의 면도날 원리를 떠올려보자.
같은 동작을 수행하는 프로그램의 소스 코드가 직관적이고 이해하기 편할수록 더 좋다.

전략패턴의 이점만 가져갈 수 있다면, 구조적으로 해당 패턴을 구현할 필요가 없다. 전략패턴의 이점을 생각해보자.

요구사항의 변경이 코드의 큰 변경을 유발하지 않고, 새로운 전략추가(새로운 Class 추가)만으로 해결한다.

만일 한 컴포넌트가 문제를 홀로 해결한다면, 문제가 없겠지만, 다름 컴포넌트들과의 합성 및 Redux를 사용해 여러 컴포넌트를 동시에 수정해야 한다면... 전략패턴은 사용할 수 없다.

굳이 전략패턴을 사용해보고 싶다면, 각 전략을 수행하는 각기 다른 컴포넌트를 만들 수 있겠지만, UI가 포함되는 컴포넌트를 따로 만드는게 절대 효율적인 방법으로 보이진 않는다.

더 깊이 생각해봤는데, 상황에 따라 적용할 수 있는 범위가 다르다.

React App 자체가 비즈니스 로직을 품고 있다면 특정한 경우에 사용해 볼 수도 있겠지만, 가급적 유지보수가 더 쉬울 방법이 있을 것이다.

1. 가능하다면 Backend가 비즈니스 로직을 처리하게
2. 1번이 불가능하다면, Frontend에서 한 컴포넌트가 내부에서 전략패턴을 사용할 수 있을 것이다.
3. 해당 문제가 다른 컴포넌트 및 redux와 연결되어 있다면 굳이 전략패턴을 쓰지 말고 다른 해법을 적용하는 편이 나을 것이다.
4. 함수형 프로그래밍 패턴을 공부하는것이 더 적절할 것이다.