소프트웨어 디자인 패턴(software design pattern)은 소프트웨어 디자인에서 특정 맥락에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책이다. - 위키피디아
일반적인 리엑트 방식에서 아토믹 디자인 패턴으로 바꾸면서 여러가지 디자인 패턴 방식을 공부 해 봤습니다. 디자인 패턴에 정의와 장단점을 정리 해 봤습니다.
디자인 패턴은 다양한 상황에서 코드에 적용할 수 있는 잘 정의된 솔루션이다.
디자인 패턴은 모든 언어에 적용된다. 즉 작성해야 할 코드가 아니라 어떤 클래스/객체를 사용할 지와 서로가 영향을 어떻게 주는 지에 대한 일종의 개요 같은 것이다.
디자인 패턴은 다음 세 가지 유형이 있다.
창조적 패턴: 객체 생성에 대한 유연성을 제공한다.
구조적 패턴: 클래스와 객체를 구조화하는데 도움을 준다.(어디에 속하는 지, 객체가 어떻게 다른 객체에 접근할 수 있는지)
행위적 패턴: 객체 간의 커뮤니케이션과 관련되어 있다.
왜 디자인 패턴을 사용할까?
디자인 패턴은 수십 년 동안 사용되어 온 검증된 방법이다. 사용 사례들이 분명하게 존재하며,기존의 문제들을 빠르게 해결할 수 있도록 도와 준다.
또한 디자인 패턴은 그 자체로 개발자들끼리 소통하는데에 필요한 강력한 기반을 제공한다. 코드에서 익숙한 디자인 패턴을 사용하면 그 코드는 자체로 소통할 수 있는 문서가 된다. 코드에서 디자인 패턴 용어나 인터페이스를 인지했을 때, 써드 파티 혹은 동료의 코드를 이해하는 것이 더 쉬워진다.
1. 코드의 가독성을 높여준다.
이번 기회에 디자인 패턴을 적용하지 않은 이전의 프로젝트들을 살펴봤다. 당시에도 구조가 지저분하다는 느낌을 받았는데 디자인 패턴을 알고 다시 보니 더욱더 보기 어렵게 다가왔다.
2. 재사용성을 높일 수 있다.
데이터를 출력하는 부분인 Presenter를 만들어 놓는다면 다른 상태 값을 갖는 Container에도 적용시킬 수 있어 재사용성을 높이게되고 이를 통해 개발 효율을 높일 수 있다.
예를 들어, 다음 용어들은 React의 코드 베이스 전반에 걸쳐 등장한다.
- ProvideContext
- EventEmitter
- Listener
- Subscription
- Dispose
위 용어와 개념에 대해 익숙한 개발자는 코드의 세부적인 부분에 대한 이해 없이도 함수의 디자인과 사용법에 대해 빠르게 알 수 있다.
'프론트엔드 > react' 카테고리의 다른 글
[React] 컴포넌트 렌더링 이후 effect 수행하기 (0) | 2022.01.24 |
---|---|
moment를 적용 하면서 (0) | 2022.01.12 |
AXIOS를 통한 서버연결 (0) | 2021.12.12 |
REDUX 란? 상태관리 프로그램이란? (0) | 2021.11.29 |
리액트 라이프사이클의 이해 (0) | 2021.11.28 |