자바스크립트 리액트 디자인패턴

review · 2026-3-17

← 리스트로

자바스크립트 리액트 디자인패턴

디자인 패턴 소개

코드를 패턴화해 이해하기 좋게 만들고 최적화된 패턴에 기대면 편하고 효율적이다.

하지만 적합한 상황이라고 무조건 적용할 필요는 없다.

소프트웨어에서 반복되는 문제와 주제에 적용할 수 있는 재사용 가능한 템플릿이 바로 디자인 패턴이다.

예를들면 리액트의 컨텍스트 api는 공급자 패턴을 적용하누좋은 예이다.

패턴성 검증, 프로토패턴 그리고 세가지 법칙

사람들에게 패턴으로 인정받기 위해서는 패턴성 검증이 필요하다.

자격을 갖추기 전꺼지의 패턴은 프로토패턴 이라고 한다.

특정 목적을 해결하는데 적합하고 유용하며 실제 코드에 작용할 수 있는 가능성이 높을때 좋은 패턴이라고 말할 수 있다.

패턴 구조화 및 작성

패턴 살계자는 아래 사항을 고려해야한다

이름, 설명, 컨택스트(패턴이 작용되야하는 상황) , 문제, 해결방법, 구현방법, 예제, 연계패턴, 관계성, 다른사람들의 의견

모범패턴

좋은 패턴은 그 패턴이 왜 필요한지에 대한 근거를 명확히 제공한다.

패턴을 사용하므로서 동일한 지식을 공유하고 작업할수 있기에 유용하다.

직접 디자인 패턴을 작성하고자 한다면, 기존 패턴을 참고하는게 좋다.

예로 ‘노출 모듈 패턴’ 은 모듈패턴을 참고해 만든 것이다.

안티패턴

안티패턴이란 문제 상황에 대한 잘못된 해결책을 말한다.

최신 자바스크립트 문법과 기능

모듈을 사용하면 큰 프로그램을 여러부분으로 쪼개어 관리할 수 있고 의존성을 파악하기 쉽다.

esmodule 은 정적 가져오기와 동적 가져오기가 있다.

특히 동적 가져오기는 사용자 상호작용에 따라 가져오기가 가능하다.

인터섹션옵저버와 함께 사용하면 뷰포트에 보이는 순간에 가져오는것도 가능하다.

디자인 패턴의 유형

  1. 생성패턴
  • 주어진 상황에 적합한 객체를 만드는 패턴
  • 생성자, 팩터리, 빌더, 추상팩터리, 프로토타입, 싱글톤
  • 빌더는 정보를 조립한 후 마지막에 build 메서드로 객체 생성
  • 추상 팩토리는 복잡한 타입의 객체들을 분류 정의한후 상송하는 방식이다.
  1. 구조패턴
  • 객체의 구성과 객체간의 관계에 관한 패턴
  • 데코레이터, 퍼사드, 플라이라이트, 프록시, 아탑터
  1. 행위패턴

  • 객체 간 커뮤니케이션 개선

  • 옵저버, 시그널, 이터레이터, 방문자, 중재자

  • 커멘드패턴 - 실행 무분을 일반화하여 분리.

  • 책임연쇄패탄 - 요창을 르처리힐수 있는 객체를.찾기위해 체인간에 요창을 전달

  • 메멘터패턴 - 중가누복구를 위해 데이터 저장

방문자패턴

  • 방문자 패턴은 객체 구조는 건드리지 않고, 그 객체들에 대한 새로운 작업을 바깥에서 추가하기 위한 패턴이야.
class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  accept(visitor) {
    return visitor.visitCircle(this);
  }
}

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  accept(visitor) {
    return visitor.visitRectangle(this);
  }
}

class AreaVisitor {
  visitCircle(circle) {
    return Math.PI * circle.radius * circle.radius;
  }

  visitRectangle(rect) {
    return rect.width * rect.height;
  }
}

const shapes = [
  new Circle(5),
  new Rectangle(4, 6),
];

const areaVisitor = new AreaVisitor();

for (const shape of shapes) {
  console.log(shape.accept(areaVisitor));
}

자바스크립트 디자인 패턴

const privateData = new WeakMap()

class User {
  constructor(name) {
    privateData.set(this, { name })
  }

  getName() {
    return privateData.get(this).name
  }
}

예전에는 이런식으로 private 상태를 구현하기도 했다.

노출모듈패턴

노출모듈패턴이나 모듈패턴 같은 종류의 패턴들은 사실상 응용된 부분이 복잡해 보이지만 사실상 다 비슷한 패턴임

es module이 지원되면서 사실상 방식이 통일됨

프로토타입 패턴

이미 존재하는 객체를 기반으로 새로운 객체를 만드는 패턴

자바스크립트 고유의 방식으로 사용함.

팩토리 패턴

객체를 생성하는 패턴인, 생성자를 직접 사용하지 않고 한번 wrapping 하여 사용함.

복잡한 생성 로직을 생성자와 함께 사용하면 편리하기 때문.

추상 팩토리 패턴

각각 비슷한 목표를.지닌 클랴스들의 생성 패턴을 강제할때 사용. 팩터리 패턴의 한 종류로서, 추상클래스 상속을 이용하여 각각 비슷한 목표를 지닌 클래스들의 생성 패턴을 강제할때 좋음.

퍼사드 패턴

실체를 숨기고, 꾸며낸 겉모습만 세상에 드러내는 패턴

믹스인 패턴

서브클래스가 쉽게 기능을 상속받아 사용할수 있게 만드는 패턴.

최소한의 구현으로 객체의 기능을 상속할수 있게 해준다.

말 그대로, 여러 클래스의 기능을 섞는것이 가능해진다.

하지만 코드의 불확실성이 커지는 패턴이라서, 최근에는 안티패턴으로 취급되기도 한다.

서브클래싱

부모클래스에서 속성을 상속받아 새로운 객체 를 만드는것

대코레이터 패턴

큰 힘을 들이지 않고도 쉽게 특정시스템에 기능을 추가할 수 있다.

쉽게 말하면 상속을 사용하는 대신, 기존 객체나 함수를 한겹 포장 해서 기능을 추가하는 방법이다.

프록시와 비슷한 개념으로 생각해도되는데, 틀린점은 프록시는 대신 처리해주는 느낌이고 데코레이터는 기능을 포장하여 확장하는 느낌이다.

의사클래스 데코레이터

데코레이터의 변형패턴

보통 어노테이션 을 이용해서 컴파이루시점에 동작을 변형시키는 데코레이터를 말함.

츠상 데코레이터 패탄을 이용하면 복잡한 속성으루갖는 경우 손쉽게 특정 속성들만 작동하게끔 포장할수ㅜ잌ㅅ다.

플라이웨이트 패턴

객체를 최대한 가볍게 만들어서 메모리 사용을 줄이는 구조적(Structural) 디자인 패턴.

공통되는 데이터는 공유하고, 변하는 데이터만 외부에서 주입하는 것이 핵심 아이디어다.

덕 펀칭 패턴

덕 펀칭은 서로 비슷하지만 속성 한두개차이로 약간은 다른 객체의 모자른 부분에 직접 속성을 확장하여 인터페이스를 맞추는 기법이다.

관찰자패턴

발행 구독 패턴과 비슷해 보이지만 결합도 측면에서 차이점이 있다.

관찰자 패턴은 발행자와 구독자가 서로를 알고 있다.

발행 구독 패턴은 중계자가 있다.

중재자 패턴

중재자 패턴은 똑똑한 발행구독 패턴이라고 보면된다. 발행구독 패턴이 단순히 공지 게시판 수준의 역할이었다면. 중재자 패턴은 좀더 구체적인 구독조건을 설정할 수 있다.

커맨드패턴

작업을 단일 객체로 캡슐화 하여 추후에 작업할 수 있게 해준다.

명령을 내리는 객체와 명령을 실행하는 객체를 분리하는게 요점이다.

특정 객체에 조회나 구매에 대한 메서드를 직저부실향해도 되지만 만약 api가 변경되먄 해당 객체를 사욘라는 부분을 전부 교체해야한다. 이때 명령을 내리는 객체가 증건역할을 하면 명령을 내리는 갹체마누 수정하면 된다.

특정 객체에 조회나 구매에 대한 매서드를 직접 실행해도 되지만 만약 api가 변경되면 해당 객체를 사용하는 부분을 전부 교체해야 한다. 이 때 명령을 내리는 객체가 중계역할을 하면 명령을 내리는 객체만 수정하면 된다.

실행과 취소에 해단 동작을 일반화하여 일관되게 처리할 수 있다.

실행 순서 및 취소 를 추상화하여 재활용하거나 활용하기 좋다.

자바스크립트 mv* 패턴

mvc패턴

모델 뷰 컨트롤러 관심사 분리

템플릿 자체는 뷰가 아니라 뷰의 역할은 모델의 변화를 감지해서 템플리세 반영해주는게 mvc 패턴의 뷰의 역할이다.

컨트롤러는 뷰를 조작할때 모델을 업데이트 하는 역할을 한다.

mvp패턴

mvp에서 p는 모델을 관찰하고 뷰를 업데이트 해주는데 mvc패턴에 v의 역할이 축소되고 c의 역할이 확대된 개념인다.

c는 모델의 업데이트를 뷰가 직접하지 않도록 하는 제한된 역할을 했지만. p는 모델과 뷰의 모든 중재역할을 전담함다.

사실상 mvc, mvp 패턴은 비슷한 효과를 지닌 비슷한 패턴이다.

mvvm패턴

mvc mvp를 기반으로 하는 패턴.

p와 vm의 차이점은 vm은 선언적이고 v와 결합도가 낮다는 것이다.

상태는 vm에서 관리단순한 ui의 경우 mvvm은 과할수 있다.

Vue는 자신이 mvvm이라고 주장 한다. 하지만 리액트는 자신을 mv*로 규정하지 않는다.

이런 패턴 분류는 광장히 주관적이다.

비동기 프로그래밍 패턴

프로미스는 네트워크 api를 호출할때 주로 사용하는데, 메모제이션패턴 과 사용하면 궁합이 좋다.

then을 이용해 파이프라인을 만들수 있다.

프로미스 재시도 패턴을 이용하면 실패시 몇번정도 재시도를 시킬 수 있다.

프로미스에 데코레이터 패턴을 이용하면 고차함수 방식으로 특정한 기능을 추가 가능하다.

모듈형 자바스크립트 디자인패턴

AMD

define, require를 이용해 사용함. 비동기 모듈로드

common js

nodejs에서 주로 사용. 오직 객체만을 모듈로서 지원. 생성자 같은것 못 내보냄.(객체로 쌓서 내보내야 된다는 말)

UMD

AMD Commonjs 혼합방식

네임스페이스 패턴

외부에서 가져온 코드가 우리 코드의 동작을 방해하는걸 말아준다.

  1. 단일 전역변수 패턴
  2. 접두사 네임스페이스 패턴
  • 네임스페이스 객체 이름에 프리픽스 잡두사를 붙여서 중벅을 방어함.
  1. 객체 리터럴 표게 패턴
  2. 중첩네임스페이스 패턴
  3. 네임스페이스 주입패턴
  • 즉시실행과 apply 를 통해 this를 주입해주는 패턴
  1. 중첩네임스페이스 자동화 패턴
  2. 의존성 선언패턴
  3. 심층객체 확장 패턴

위와 같은 여러가지 응용이 있는데. 요즘은 esm 같은 모듈 체계가 네임스페이스 역할을 기본적으로 잘 해준다.

위와같은 패턴들은 객체 네임스페이스 안으로 스코프를 숨김으로서 충돌 발생을 막아주는 패턴들인데… 기본 아이디어는 다 똑같으므로 세세하게 모든 패턴을 암기할 필요는 없다. 큰개념을 알아두고 세세한 패턴 정도가 있다는 정도를 알고 있다면 필요할때 유용하게 떠올릴수 있다.

리액트 디자인패턴

  1. 고차 컴포넌트패턴
  2. 랜더프롭패턴
  3. Hooks 패턴
  • 관심사 별로 코드 모듈화가 쉬어짐
  • ui와 무관한 로직 분리 용이
  1. 동적 가져오기
  2. 로더블 컴포넌트
  • 서버에서 동적 컴포넌트를 잘 못그리는 문제를 해결하는 라이브러리.
  1. 상호작용시 동적 가져오기

웹성능 바이털 지표

fcp lcp tti 같은 지표가 뭘 말하는건지 숙지하면, 모듈로드 전략을 설계할때 도움이 된다.

PRPL 패턴

http1에서는 한번에 연결에 하나의 요청 하나의 응답으로 웹이 동작했지만,

http2 에서는 한번에 tcp연결로 여러 스트림의 양향향 통신을 할 수 있게 되면서 성능이 향상됨

PRPL패턴이란 빠르게 보여줘야할 리소스는 빨리 받아서 보여주고 나머지 리소스는 천천히 lazy 로드 하는걸 말한다. 이 전략은 리소스 캐싱 전략도 포함한다. PWA를 위해 구글에서 주도하는 패턴이다.

프리로드 힌트 같은 기능이 이 전략을 배경으로 탄생했다.

로딩 우선순위

  1. <Link rel=preload> (남용하면 바이털지표에 영향을 줌) 주의
  2. 동적 임폴트 같은 경우 프리로드 전략을 사용할 수 있는데 웹펙같은 번들러에게 주석울 통해 표시해주는 방법을 사용한다.
  3. 프리패칭은 서용자인터렉션 등으로 판단하여 preferch 링크 태그를 삽입하는 방법으로 사용한다 nextjs같은 프레임웍에서는 알아서 해주기도 한다.
  4. preload + async 기법을 사용하면 중요한 스크립트를 가장 빠르게 로드해서 실행핼수 있다. 하지만 웹 성능 지표에 영향을 줄수 있으므로 과하게 사용하면 안된다.

가상스크롤 패턴

대규모데이터 리스트 랜더링

react-window 와 같은 라이브러리 사용하면 됨

Grid도 가능

content-visibility css 속성

이걸 사용하면 뷰포트 밖에 있는 리스트 렌더링을 지연시킬 수 있다.

렌더링 패턴

  1. CSR
  2. SSR
  3. 정적랜더링
  4. ISR
  5. 스트리밍
  • 서버에서 스트리밍으로 데이터를 전송하는 방식으로 구현
  1. 엣지렌더링
  • 엣지 SSR은 중앙 서버가 아닌 사용자와 가장 가까운 CDN 노드에서 HTML을 즉석 렌더링하여, 정적 캐싱의 속도와 동적 페이지의 유연성을 동시에 잡는 분산 인프라 전략이다
  1. 하이브리드 랜더링
  2. 부분 하이드레이션
  3. 점진적 하이드레이션
  4. 점진적 향상
  • TTFB

클라이언트가 페이지의 첫번째 바이트를 받는데 걸리는 시간.

TTI 랑 FID가 틀린점은 TTI는 페이직가 상호작용을 위해 완전히 준비되는데 걸리는 시간이라면

FID는 완전하진 않더라도 첫번째 이벤트 핸들러가 반응할수 있는 최소 시간을 말한다.

그 밖에도 아래 사항을 고려해야 좋은 서비스를 만들수 있다.

  1. 빠른빌드시간
  2. 낮은서버비용
  3. 쉬운롤백
  4. 안정적기동
  5. 확장 가능한 인프라

아일랜드 아키텍처

동적 영역을 공간적으로 분리하여 필요한 '섬’만 활성화한다 (영역 중심)

Marco Astro 같은 프레임웍이 아일랜드 아키텍처를 지원한다.

점진적 하이드레이션

동적 영역을 시간적으로 분리하여 우선순위에 따라 순차적으로 활성화한다 (순서 중심)

리액트 애플리케이션 구조

기능별 그룹화와, 파일유형별 그룹화가 있다.

기능별 그룹화

기능별로 파일을 묶음 , 코드 중복을 막으로면 좀 더 신경써야하는 단점이 있다.

파일유형별 그룹화

기능별 결합도가 커져서, 혼잡해짐.

혼합형 그룹화

프론트엔드 프레임웍의 경우 라우팅 경로별 그룹화를 많이 사용함

  • 컨테이너, 프리젠테이션 컴포난트 그룹 분리 패턴

nextjs 를 위한 앱 구조

  1. Commons- 공통모듈이나 공통 컴포넌트
  2. Modules - 도메인 기능별 컴포넌트나 모듈
  3. Pages