[React.js] #6 Redux(리덕스)란 무엇일까?

오늘은 컴포넌트의 상태 관리를 도와주는 Redux(리덕스)에 대해서 공부를 해보려 합니다.

저도 리덕스에 대해서 자세히 모르는 상태입니다. 다 같이 공부하는 느낌으로 한번 정리해보는 시간을 갖도록 하겠습니다.

 

우선, 기본적인 개념을 알기 위해 리덕스 도큐먼트를 구경 갑니다. 총총...

 

리덕스란?

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다. (워드프레스 프레임워크인 Redux Framework와 혼동하지 마세요.)

Redux는 여러분이 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줍니다. 여기에 더해서 시간여행형 디버거와 결합된 실시간 코드 수정과 같은 훌륭한 개발자 경험을 제공합니다.

 

글을 읽고 리덕스가 무슨 역할을 하는지 감이 오시나요..? 저는 전혀 잘 모르겠습니다 ㅠㅠ.

그래서 여러가지 자료를 취합하여 간단하게 정리해보면 다음과 같은 결론이 나옵니다.

 

SPA가 발전함에 따라 자바스크립트 코드로 많은 상태를 관리할 필요성이 생겼고 서버에서 관리하는 상태들 뿐만 아니라 로컬에서 관리하는 상태들이 많아졌고 상태에 따른 UI 변동에 대한 복잡성이 높아지게 됐습니다.

그래서 상태 관리가 제대로 되지 않으면 전체적인 앱 관리가 어려워지게 되었고 상태를 좀 더 효율적으로 관리하기 위해 리덕스가 탄생하게 되었습니다.

 

 

어떻게 효율적으로 관리하는지 그림을 통해서 한번 살펴봅시다.

 

좌: 노리덕스 우: 리덕스

 

왼쪽 그림은 리덕스를 사용하지 않았을 때 컴포넌트의 상태가 전달되고 관리되는 방식이고

오른쪽 그림은 리덕스 스토어를 통해 컴포넌트들의 상태를 깔꼼 하게 관리할 수 있다는 그림입니다.

 

이제 리덕스 자체에 대해서는 어느 정도 이해가 좀 되셨나요? 그렇다면 조금 더 자세하게 알아보도록 하겠습니다.

 

 

리덕스의 핵심 개념

 

리덕스의 핵심 개념은 크게 세 가지입니다.

 

- 상태 정보를 담고 있는 객체 즉, state

- 상태를 변화를 일으키는 action(액션)

- model(모델)과 action(액션)을 묶어서 관리하는 reducer(리듀서)

 

 

이해를 돕기 위해 그림을 가져왔습니다.

 

제가 가져온 그림은 "redux-cycle"을 검색하여 가져온 그림입니다. 그림을 한번 살펴보도록 합니다.

 

상태(state)에 따른 UI를 구성하고 UI에서 행동(action)이 일어나면 Reducer로 dispatch 하는 과정을 통해 store(여기서 store는 상태를 관리하는 redux-store입니다)를 통해 상태 변화를 일으킵니다. 그 후 상태(state)에 따라 UI가 랜더링 되는 과정을 반복하게 되죠! 위에서 말한 세 가지 개념은 계속해서 만나게 될 테니 기억해주세요!

 

 

리덕스의 세 가지 원칙

 

1. 애플리케이션의 모든 상태는 하나의 스토어 안에 하나의 객체 트리 구조로 저장된다.

2. 상태는 읽기 전용이다. 즉, 불변성을 유지해야 합니다

3. 리듀서는 순수 함수의 상태여야 합니다

 

크게 어려운 말인 없으니 "순수 함수"에 대해서만 잠깐 집고 넘어가 봅시다.

 

순수 함수란?

동일한 파라미터에 대해 항상 동일한 값을 리턴해야 하며, 외부의 상태에 대해서는 조작하지 않는 함수입니다.

 

 

이제 리덕스가 무엇이고 어떤 역할을 하는지 리덕스에서 사용하는 주요 개념과 원칙에는 어떤 것들이 있는지 알아보았습니다. 다음 포스팅에서는 예제를 작성해보며 직접 리덕스를 사용해보는 시간을 갖도록 할 예정입니다.

 

 

저의 포스팅은 주관적인 내용이 상당히 많이 존재합니다.

그렇기 때문에 설명이 잘못되거나 모자란 부분이 존재할 수 있음을 양해하여 읽어주시면 감사하겠습니다.

 

 

탕빠이!