MVC패턴
먼저, Redux에 대해서 알아보기 전 MVC패턴에 대해서 알아보자.
MVC (Model-View-Controller) 패턴은 소프트웨어 디자인 패턴 중 하나로, 애플리케이션을 모델, 뷰, 컨트롤러로 나누어 개발하는 방법론이며 개발자라면 누구나 한번은 들어 봤을것이다!
각각의 역할에 대해서 간단히 소개를 하면
모델 (Model):
쉽게 말하자면 화면에 반영되는 실제의 데이터들이다. 실제로 서버에서 내려받는 데이터 또는 미리 선언한 변수들의 대한 데이터 모두가 해당될 수 있다.
뷰 (View):
사용자에게 데이터를 시각적으로 표현하는 부분(UI)이고 쉽게 말해서 화면 그 자체라고 할 수 있다. 뷰는 사용자로부터 입력받은 데이터를 컨트롤러에게 전달한다.
컨트롤러 (Controller):
우리가 어떤 버튼을 클릭하면 숫자가 +1이 되는 버튼이 있다고 하자.
숫자는 모델의 영역에 들어갈 것이고 버튼은 뷰의 영역이다. 여기서 버튼을 누르는 액션을 담당하는 곳이 컨트롤러 이다. 이렇게 모델과 뷰의 중간 역할을 하는것이 컨트롤러이다.
왜 MVC패턴을 쓰는데?
MVC 패턴이 처음 도입되었을 때 주요 목표는 소프트웨어를 더 효율적으로 설계하고 유지보수하기 위함이었다.그 당시 MVC패턴을 사용하는 이점이 몇가지 있었는데
- 구조적 분리:MVC는 모델, 뷰, 컨트롤러로 구분함으로써 각각의 역할이 분명하게 정의됨으로써 독립적으로 개발 및 유지보수가 가능했으므로 재사용성 또한 높았고 유지보수성이 향상되었다.
- 동시 다발적 개발: 각각 독립적으로 구성되어 여러 개발자가 동시에 작업할 수 있었으므로 대규모 프로젝트에서 팀의 협업이 향상되고 효율성이 증가됐다.
MVC 패턴은 대표적으로 이러한 이점들로 소프트웨어 개발의 효율성을 향상시켰는데, 이후의 프로젝트 규모가 점점 커지면서 Model의 상태에 변화가 생길 경우 Model과 View 사이에 엄청난 양의 데이터가 양방향으로 전달되어 데이터 흐름의 예측이 어려워지고 엄청난 버그들의 원인이 된다.
이를 해결하기 위해 나온 패턴이 Flux패턴이다.
Redux란?
리덕스란 JS의 상태관리 라이브러리로 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 데이터에 관하여 전역으로 관리를 할 수 있다.
쉽게 말하자면 컴포넌트별로 구성된 프로젝트에서 제일 상위의 폴더에서 제일 하위의 폴더로 데이터를 보내기 위해서는 Props로 몇번이나 연결을 시켜야한다.
하지만 리덕스를 사용한다면 위의 오른쪽 사진처럼 Store에 저장된 값을 어디에서든 꺼내서 사용이 가능하기때문에 Props를 몇번이나 연결시키는 수고를 안해도 된다.
Flux 패턴
Flux 패턴은 사용자가 Action을 생성하고, 이를 Dispatcher에 전달하여 Store의 데이터를 변경한 뒤 View에 반영하는 단방향의 데이터 흐름을 가지는 SW 아키텍쳐이다. 이 패턴은 사용하는 프로젝트는 데이터의 흐름을 파악하기가 용이하고, 그 결과를 쉽게 예측 가능하다.
Flux 패턴을 가지는 Redux의 실행 과정을 간단하게 다시 설명하자면
Store라는 전역 상태 저장소 state와 Reducer를 저장하고
설정한 내장 함수를 통해서 Store에 접근하여 데이터들을 호출하거나 변경하는 형식이며 이런 저장소 즉 , Store를 변경하기 위한 로직을 저장하는 곳이 바로 Reducer이다.
Reducer는 Redux만의 고유한 개념으로 현재 state(데이터)와 Action을 인수로 전달 받아 Store에 접근하여 전달 받은 Action을 가지고 새로운 state(데이터 형식)를 만들어 관리하는 방식이다.
또, state에 어떠한 데이터 변경이나 추가 삭제 등 변화가 필요할 때 사용자는 Action을 발생시킴으로써 Reducer에 전달하며 Action이 새롭게 Dispatch 될 때마다 인수로 전달한 함수를 호출하도록 설정할 수 있습니다.
최근 추세
프로젝트의 규모가 커지면 커질수록 관리해야하는 state 값들이 많아질 것이며 그에 따라서 Redux를 포함한 여러 상태관리 라이브러리를 많이 사용하게 될 것입니다.
굳이 Redux여야 하는가?에 대한 질문은 프로젝트의 방향성이나 기획에 따라서 충분히 변경이 될 수도 있고 무조건 Redux여야 하는것도 아닙니다. 다만 Redux에 대한 방대한 자료와 잘 구성된 커뮤니티가 있기에 접근성이 좋다고 할 수 있습니다.
최근에는 SWR이나 React-query 같은 다양한 상태 관리 라이브러리들이 등장하였고 앞으로도 계속해서 나올테니 잘 맞겠다고 생각되는 것을 사용해도 문제될 부분이 없다고 생각됩니다.
