[책을 읽자] 자바스크립트 + 리액트 디자인 패턴

개요

이하의 책을 읽으면서 얻은 지식을 정리하고자 한다.

 

디자인 패턴 소개

패턴이란?

• 검증끝: 과거부터 이어져온 소프트웨어의 개발의 특정 문제를 해결하기 위해 오랜 시간 동안 검증된 효과적인 방법
• 재사용성: 사용자의 요구에 맞춰 적용할 수 있으므로 재사용성이 뛰어나다
• 가독성: 패턴은 정해진 구조와 공통표현을 사용하므로 알아보기 쉽다.

패턴의 이점

• 사소한 실수로 인한 큰 문제를 방지
• 반복을 피할 수 있다.
• 공통된 어휘를 사용함으로 의사소통이 원활해진다.

리액트에서의 패턴의 예

공급자 패턴(Provider Pattern)도 하나의 디자인 패턴인데 리액트에서는 Context API가 이에 해당된다. 페이지 컴포넌트에서 아주 작은 컴포넌트까지 데이터를 전달할 때 중간에 거쳐야 할 컴포넌트가 많아지면 Props Drilling을 해야 하는데 이는 거치는 컴포넌트에 전부 프롭스를 설정해야 함으로써 유지보수가 어려운 코드가 만들어진다. 이를 해결할 수 있는데 공급자 패턴(Context API) 인것이다.

 

패턴의 종류

• 생성 패턴
  • 개요: 주어진 상황에 적합한 객체를 생성하는 방법
  • 목표: 기본적인 객체 생성 방식이 프로젝트의 복잡성을 증가시킬 수 있기에 생성 패턴은 이 과정을 제어하여 문제를 해결하는 것이다.
  • 예시: 생성자, 팩토리, 추상, 프로토타입, 싱글톤, 빌더패턴
• 구조패턴
  • 개요: 객체의 구성과 객체간의 관계를 인식하는 방법
  • 목표: 시스템의 어느 한 부분이 변경되더라도 다른 부분에는 영향이 가지 않도록 도와주며 설계 목적에 맞지 않는 부분을 개선하는 것
  • 예시: 데코레이터, 퍼사드, 플라이웨이트, 어댑터, 프록시패턴
• 행위패턴
  • 개요: 시스템 내의 객체 간 커뮤니케이션을 개선하거나 간소화하는 방법
  • 목표: 객체 간의 공통적인 커뮤니케이션 패턴을 감지하고 책임을 분배함으로써 커뮤니키에션의 유연성을 높이고 객체의 행위를 추상화 하는것
  • 예시: 이터레이터, 중재자, 관찰자, 방문자패턴