코더 장군
강아지코더
코더 장군
전체 방문자
오늘
어제
  • 분류 전체보기 (67)
    • 프론트엔드 (24)
      • react (9)
      • html5 * css3 (1)
      • Javascript (10)
    • 개발일기 (36)
      • 알고리즘 (27)
      • 블록체인 (3)
      • mongoDB (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 비공개#일기
  • 일기#심리상담
  • 백준

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
코더 장군

강아지코더

프론트엔드/react

디자인 패턴이란 무엇인가?

2021. 11. 29. 01:32

소프트웨어 디자인 패턴(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
    '프론트엔드/react' 카테고리의 다른 글
    • moment를 적용 하면서
    • AXIOS를 통한 서버연결
    • REDUX 란? 상태관리 프로그램이란?
    • 리액트 라이프사이클의 이해
    코더 장군
    코더 장군
    강아지 키우고 있는 소소한 개발자 성장기를 쓰는 일기장입니다

    티스토리툴바