Intro & Singleton Pattern

[humonnom]

Intro

• 디자인 패턴이란 - 반복되는 주제를 최적화된 방식으로 처리하는데에 사용할 수 있는 개념
• 이 책에서 다룰 내용
  • ES2015+를 사용한 일반적인 디자인 패턴(구현, 이점 및 함정)
  • React 전용 디자인 패턴(React Hook 활용)
  • 최신 웹 앱을 개선을 위한 패턴과 최적화

리액트 overview

• JS를 이용해서 UI를 작성하는 것에 대한 요구 증가
• 프론트엔드 개발자에서 code 라고 하는 것은 UI와 관계된다(버튼, 네비게이션, 리스트, 좋아요 등)
• 세가지 key 컨셉을 활용해서 복잡한 UI를 구현할 수 있다.(컴포넌트, props, state)
• React는 컴포넌트 중심이기 때문에 모듈화하여 생각할 수 있다.(개별 객체를 인식할 수 있다.)
  • componentization

Singleton Pattern

• 애플리케이션에서 단일 인스턴스 사용
• 인스턴스가 하나만 생성되어야 함
• 생성자에서 이미 인스턴스가 있는지 체크할 필요가 있다.(이미 있으면 throw error)
• 장점: 메모리 공간 절약
• 단점: 객체를 직접 생성할 수 없는 다른 언어에서는 예제처럼 클래스를 통해 인스턴스를 생성하지만, JS에서는 객체를 직접 생성할 수 있음
  • 객체로 구현 가능(Singleton 패턴은 과잉임)
  • Testing: 새로운 인스턴스를 생성할 수 없으므로 test가 까다로움
  • Dependency hiding: (import)사용하는 곳에서 해당 모듈이 싱글톤인지 알 수 없고, 수정함으로써 의도치않게 다른 영역에 변화를 줄 수 있음
  • Global behavior: 전역변수 => 전역 스코프 오염 => 예상하지 못한 동작
    • 싱글톤 패턴을 일종의 전역변수를 가지게 하는데, 애플리케이션이 커지고 이런 전역변수가 늘어나면 관리가 어렵다.
  • State management in React: 일반적으로 상태 관리 도구를 사용 => 모든 문제가 사라지는 것은 아니지만, 읽기 전용 상태를 제공/ 디스패치를 통해 액션을 전송하여 업데이트 하므로 의도한대로 상태가 변경되는지 확인할 수 있음