[리액트/recoil] - 상태관리 웨 쓰는건데

지금까지 공부했던 리액트의 데이터 흐름은 단방향으로 흐르고

state / props의 경우 컴포넌트 내부에서 변화하는 값의 상태이다.

 

소규모 프로젝트에서 전역적인 관리가 필요할때, props로 어찌저찌 값을 공유할 수 있겠지만

서비스 규모가 커지며 전역적인 state가 필요할 경우에도 props로 관리를 한다면? Props Drilling이 발생하게 된다. 

Props Drilling: 중첩된 컴포넌트간 상태공유를 위해 props를 전달하는 과정에서 Props전달이 드릴로 땅을 뚫듯 깊어지는 현상

 

이런 흥선대원군 쇄국정책같은 리액트의 데이터를 전역적으로 사용할 수 없을까?

라는 생각에서 나온 상태관리 툴 Recoil, Redux,Zustand, jotai, mobx 등이 있다 

 

더 자세한 개념은 flux탄생 배경과 MVC 패턴과 FLUX패턴에 대한 문서를 참고하자

https://bestalign.github.io/translation/cartoon-intro-to-redux/

Redux로의 카툰 안내서

FLUX : 데이터를 중앙 집중형 스토어에 저장하고 Action을 통해 데이터를 조작하는 패턴

 

FLUX패턴중 요즘 가장 핫한 Zustand

https://docs.pmnd.rs/zustand/getting-started/introduction

Zustand Documentation

 

공식문서도 한페이지로 아주 컨팩트하다.

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()

  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

리덕스처럼 세팅하는 문법도 없고 별도 상위 컴포넌트 적용 없이도 이런식으로 사용할 수 있다니 정말 대박박박~~

 

+부가기능

ajax요청 같은 경우도 상태관리 함수 내에서 선언이 가능하다.

export const useYourStore = create((set)=>({
  yourState : 'VALUE',
  yourAction : (val) => set( (state) => ({ yourState : state.yourState }) )

  async response = await fetch ('http://우짤래미 뿅뿅:080');
}))

state 값을 확인해보며 디버깅하는것도 다른 상태관리랑 다르지 않다.

기존에 사용했던 import {devtools} from "zustand/middleawre" 

리액트 개발자도구 안에서 볼 수 있다.

 

state가 많을 경우에도 store안에 밀어넣지말고 다른 store를 새로 파서 사용해도 된다.

 

state변경 전에 어떠한 작업을 하고싶을 경우에도 middleware 함수도 쉽게 제공하기 때문에 쉽게 사용할 수 있다.

"zustand/middleware"

 

zustand의 소개는 이정도로 하고

이제 FLUX와 Atomic 패턴에 대한 비교를 해보고자 한다.

 

FLUX - Redux, Zustand

한 가정에 부모님과 자녀가 있으며, 특정 이벤트가 발생했을 때 모든 구성원에게 알림을 보내고 싶다고 가정해보자

• Action: 이벤트가 발생했을 때, 알림을 보내는 동작(Action)이 발생
• Dispatcher: 알림을 관리하는 중앙 허브(Dispatcher)
• Store: 알림 데이터를 저장하고 있는 스토어(Store)
• View: 각 구성원이 알림을 확인할 수 있는 뷰(View)

이 예시에서 이벤트가 발생하면 Action이 Dispatcher에 전달된다. Dispatcher는 이벤트를 store에 저장하고 store는 변경된 데이터를 View로 전달한다. View는 Store의 데이터를 통해 알림을 확인할 수 있다. 이런 방식으로 데이터는 단방향으로 흐르게 되고, 상태관리가 용이해진다.

 

Atomic - recoil

휴대폰 앱을 개발하려고 할 때, 카메라와 사진쳔집 기능을 만들어 본다고 가정해보자

• Atom: 카메라 촬영 기능
  • Atom은 카메라를 실행하고 사진을 촬영하는 독립된 기능. 이 Atom은 휴대폰 앱의 핵심 구성 요소 중 하나로 작동, 사용자는 앱에서 카메라 기능을 호출하고, Atom은 카메라를 열어 사진을 촬영
• Atom: 사진 필터 적용 기능
  • Atom은 촬영한 사진에 필터를 적용하는 독립된 기능 이 Atom은 다양한 필터 옵션을 제공하고, 사용자가 선택한 필터를 적용하여 사진을 수정 이 기능은 사진 편집 기능의 중요한 부분
• Molecule: 카메라와 사진 필터 적용을 조합한 기능
  • Molecule은 카메라 촬영 기능과 사진 필터 적용 기능을 조합하여 동작하는 기능, 사용자가 카메라로 사진을 촬영하면, Molecule은 촬영된 사진에 필터를 적용, 이렇게 Molecule은 두 개의 Atom을 조합하여 더 큰 기능을 제공
• Organism: 전체 사진 편집 기능
  • Organism은 사진 편집 앱의 전체 기능을 구현. Organism은 Molecule들을 조합하고 다른 기능들과 연결하여 휴대폰 앱의 완전한 사진 편집 기능을 구현 예를 들어, 사용자가 촬영한 사진에 필터를 적용한 후, 추가적인 편집 도구를 사용하여 자르기, 회전, 명암 조절 등을 수행할 수 있다.

위 예시에서 Atomic패턴은 카메라와 사진편집 기능을 독립된 기능 단위로 분리하여 모듈화한다.

Atom들은 각각의 역할을 수행하며, Molecule을 조합함으로써, 더 큰 기능을 형성하고, Organism은 모든 기능을 통합하여 완전한 앱을 구현한다. 이러한 분리와 조랍을 통해 코드의 재사용성과 유지보수성이 향상된다.