• ✏️ Flux 및 Atom 패턴

    2024. 1. 17.

    by. 서카츄

     

     

    상태 관리 라이브러리란?

    - 여러 컴포넌트 간 데이터 전달과 이벤트 통신을 관리하는 도구

    - 사용자의 입력, 서버 응답, UI 상태 등 다양한 상태들을 관리하는 도구 ⇒ 종합해보면 state 관리를 위한 도구라고 볼 수 있다.

     

     

     

    Flux (아키텍처) 패턴

    단방향 데이터 흐름을 가진 패턴

    MVC (Model-View-Controller) 패턴은 양방향 데이터 흐름을 가지기 때문에 간단한 어플리케이션에서는 유용하지만, 복잡한 어플리케이션에서는 데이터 흐름을 추적하고 관리하기 어려워지는 문제점이 있다. 이를 해결하기 위해 Flux 패턴이 탄생했다.

     

    Flux 패턴의 장점

    • 단방향 데이터 흐름: 상태 변화에 대한 예측이 가능하며 디버깅이 용이하다.
    • 모듈화 구조: 상태 관리와 뷰를 분리하여 모듈화 구조로 개발할 수 있다.
    • 확장성: 상태 관리를 체계적으로 할 수 있어 복잡한 애플리케이션 확장이 수월하다.

     

    Flux 패턴의 단점

    • 복잡성 증가: 작은 애플리케이션의 경우 복잡도가 증가한다.
    • 복잡한 보일러플레이트 코드: 초기 설정을 위한 코드가 많다.

     

     


     

    Atomic (디자인) 패턴

    • 상태를 작고 독립적인 단위(=atom)로 분리하여 관리하는 패턴
    • 컴포넌트가 상태구독(subscribe)한다.

     

     

    Atomic 패턴의 장점

    • 독립성과 모듈화: 작은 단위로 상태를 관리하기 때문에 코드의 재사용성과 유지보수성이 향상된다.
    • 확장성: 상태 관리를 체계적으로 할 수 있어 애플리케이션 확장이 수월하다.

     

    Atomic 패턴의 단점

    • 복잡성 증가: 상태를 많은 아톰 단위로 나누게 되는 경우 코드 구조가 복잡해지고 관리가 어려워질 수 있다.
    • 디버깅의 어려움: 상태가 여러 아톰에 분산되어 있어 상태 변경이 일어나는 과정을 추적하는 것이 어려울 수 있다.

     

     

     

    '📚 이론정리 > React & Next.js' 카테고리의 다른 글

    ✏️ useRef  (0) 2024.01.18
    ✏️ useState  (0) 2024.01.17
    ✏️ Container vs Presenter 패턴  (0) 2024.01.17
    ✏️ Vite 세팅과 설치  (1) 2023.12.27
    ✏️ React의 Fragmemt  (0) 2023.12.25

    댓글