📚 이론정리/React & Next.js

✏️ Flux 및 Atom 패턴

서카츄 2024. 1. 17. 20:05

 

 

상태 관리 라이브러리란?

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

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

 

 

 

Flux (아키텍처) 패턴

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

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

 

Flux 패턴의 장점

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

 

Flux 패턴의 단점

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

 

 


 

Atomic (디자인) 패턴

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

 

 

Atomic 패턴의 장점

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

 

Atomic 패턴의 단점

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