이 글은 모던 리액트 Deep Dive를 기반으로 작성되었습니다.

리액트의 상태관리

나 김희찬.. 이번주도 결국 벽에 부딪혔다. 껄껄.. 리액트 딥다이브 6장 [리액트와 라이브러리 상태관리].. 아니? 6장의 문제가 아니다. [리액트 딥다이브].. 넌 뭐니? 왜 이렇게 날 힘들게하는거야..

📌상태관리

💎상태란?

React에서 컴포넌트 내에 관리되는 변수를 의미합니다. 다들 알고 있듯이 useState로 선언되는 것이 상태라고 볼 수가 있겠지요? 이런 상태를 잘 사용하면 좋기야 하겠지만, 문제는 각 컴포넌트간의 데이터 전달은 Props으로 전달이 되지만 이는 부모 컴포넌트를 통해서만 공유가 가능하다는 문제가 있습니다.

const [state, setState] = useState(init);

💎Props Drilling

부모 컴포넌트를 통해 공유가 가능하다는 이유로 인해, 중간에 있는 컴포넌트는 필요하지 않은 Props을 가져가야할 수도 있기때문에 우리가 가장 싫어하는 비효율적이며 관리가 어려워지죠. 그래서 우리는 "상태 관리"를 해줄 필요가 있습니다.

💎상태 관리하는 방법

그렇다면 상태를 어떻게 전역적으로 관리할 수 있을까? 배운 것중엔 대표적으로 2개가 있다.

1. Context API
2. 상태 관리 라이브러리

💎Context API의 단점

React에서 제공하는 API로 전역적으로 상태를 관리할 수 있다. 오잉 그렇다면, 굳이 상태 관리 라이브러리를 사용할 이유가 있을까? Context API는 앱 최상단에 Provider를 써야한다.

<MyContext.Provider value={/* 어떤 값 */}>

하지만 context가 변경되면 하위에 사용한 useContext() 녀석들은 모두 리렌더링된다는 점.. 물론, 이를 해결하는 방법이 더 있겠지만 관리할 녀석들이 많으면 많아질수록 두통을 야기할 뿐이다.

나야.. 비효율

💎상태관리 라이브러리

그렇다면 상태 관리 라이브러리 무엇이 있을까.. 대표적으로는 아래와 같이 4가지가 있다. 앞서서 주절주절 떠들긴했는데 사실 이 글의 내용은 상태관리 라이브러리를 뭘 써야할지 뭐가 다른지에 대해 다루지 않는다. 상태관리 라이브러리를 통해 디자인 패턴을 학습하고자 한다.

1. Redux
2. Recoil
3. Jotai
4. Zustand
   .
   .

📌디자인 패턴

💎디자인 패턴이란?

디자인 패턴이란, 디자이너들이 사용하는 디자인이 아니다. 물론 디자인이 설계라는 의미에서 비슷하지만 대중적으로 사용되는 의미와는 다르다. 바닐라 JS에서 jQuery를 통해 간편하게 적는 것처럼 반복된 행동이나 문제를 간편하게 해결할 수 있도록 하는 솔루션의 느낌..

💎디자인 패턴의 종류

1900년 후반대부터 등장해서 현재까지 수천여개의 패턴이 존재한다고 한다. 그 중 가장 유명한 Gof 디자인 패턴은 23개의 패턴을 3개의 유형으로 분류한다고 하는데 아래와 같다. 또한 자세한 내용은 찾아보면 좋을 듯하다 :). 서치해서 정리하기에는 주제랑 살짝 엇나가는 느낌이기에 스스로 찾아보시길 권장합니다.

1. 생성(Creational) 패턴
2. 구조(Structural) 패턴
3. 행위(Behavioral) 패턴

💎디자인 패턴은 필요한가

물론 당연하다. 이전에 했던 작업이나 반복적인 작업을 매번 하고싶어하는 사람은 없을거고 작업의 효율성을 올리기위해 우리는 모두 헤매이고 있으니 꼭 알아두어야하는 지식이다. 우리 디자이너 세계에서도 구글머터리얼 디자인과같이 암묵적인 규칙이 정해져있으니

📌Flux 패턴

💎React의 추구 패턴

React의 Props에서 알 수 있듯이 React의 데이터 흐름은 단방향으로 흐르며 이는 Flux라는 디자인 패턴에 기반하여 적용된 방식이다.

💎Redux 상태관리 라이브러리

Redux는 가장 대표적으로 사용되었던 상태관리 라이브러리로서 Flux라는 디자인패턴을 기반으로 구현된 라이브러리이다. 하지만 현재는 앞서 소개했던 다양한 상태관리 라이브러리가 생겨나면서 점차 사용하지 않는 오래된 라이브러리로 취급받고 있다.

💎Flux 디자인 패턴이란?

아래의 그림과 같이 데이터의 흐름 구조를 한방향으로 흐르도록 설계한 것.

💎Flux 요소

Flux는 Action, Dispatcher, Store, View로 구성되며 이는 Action부터 흐르게 구성되어있다.

Action

Action은 단어 그자체로 사용자의 행동을 의미한다. 사용자에 의해 데이터가 변경되면 이를 Dispatcher에게 전달한다.

Dispatcher

Dispatcher은 모든 데이터를 관리하는 중앙 허브로 Action이 감지되면 다음 단계인 Action 타입에 따라, 접근할 수 있는 콜백함수를 이용할 수 있도록 한다.

Store

Store는 상태 저장소로 상태와 상태를 변경할 수 있는 메서드를 가지고 있다. Dispatcher를 통해 콜백함수가 실행되면 변경된 내용을 View에게 전달한다.

View

View는 단어 그대로 사용자가 보고 있는 화면이라고 생각하면 편하다. Store에서 변경된 데이터가 View를 통해 사용자에게 보여지게 된다. 이 View에서 Action이 발생되면 다시 처음 로직과 같이 Dispatcher로 접근하게 되고, 해당 타입에 따라 Store의 콜백함수가 실행되는 등 반복한다.

📌MVC 패턴

💎MVC 패턴이란?

Flux패턴을 공부하면 자연스럽게 MVC 패턴을 알게 된다. 그 이유는 Flux 패턴의 존재자체가 MVC 패턴의 단점을 보완하고자 설계되었기때문에.. 그렇다면 MVC모델은 무엇인가?

Flux 패턴이 데이터의 흐름을 단방향으로 만들기위해 설계했다면, MVC는 Model과 Controller간의 양방향 데이터 흐름을 보여준다.

이러한 형태에서 만약 Controller와 Model의 관계가 많아진다면 양방향적인 데이터의 흐름으로 인해서, 상태관리가 굉장히 어려워진다. 그래서 이러한 MVC 패턴의 단점을 보완하고자 단방향적인 Flux패턴이 나오게 된 것이다.

📌그래서?

결국 React 상태관리를 공부하다 보면, 자연스레 Redux 라이브러리를 접하게 되고 Flux패턴을 학습하게 된다. 이후 Flux패턴을 공부하다보면, 자연스레 MVC 패턴도 학습하게 된다. 지피지기면 백전백승. 시대가 변해 많이 쓰이지 않는 기술일지라도, 현재 사용되는 기술의 근간이 되는 경우가 많으니 알아두면 좋다.

MVC가 React에 적합하지 않은 디자인 패턴일지라도, 프론트는 빠르게 변화하며 MVC 패턴만의 장점이 있다. 따라서, 자세하게는 몰라도 대충은 알아두면 좋지 않을까?