[React] Redux를 왜 사용하는가? - 리액트 상태관리 방법

인턴 업무를 진행하던 도중

컴포넌트끼리 값을 넘기는 작업이 잘 안되어서 

store 및 redux에 관련한 개념을 알아야 업무를 진행할 수 있을 것 같아 공부했던 내용의 기록을 위해 정리한다.

 

 

리액트에서는 어플리케이션을 만들 때,

기본적으로 하나의 루트 컴포넌트(App.js)에서 상태를 관리한다.

 

리액트에서는 부모 컴포넌트가 중간자 역할을 한다. (자식들은 부모를 통해서만 대화함)

컴포넌트 끼리 직접 소통도 가능하지만, 그렇게 하면 코드가 꼬이게 된다. (ref를 사용하면 되긴 함)

 

예를 들어,

App에서는 input 값, 이를 변경하는 OnChange 함수, 새 아이템을 생성하는 onCreate 함수 를 props로 Form에게 전달해준다.

Form은 해당 함수와 값을 받아서 화면에 보여주고, 변경 이벤트가 일어나면 부모에게 받은 onChange를 호출해서 App이 가지고 있는 input 값을 업데이트 한다.

그렇게 input 값을 수정해서 추가 버튼을 누르면 onCreate를 호출해서 todo 배열을 업데이트 한다.

todo 배열이 업데이트 되면, 해당 배열이 todoItemList 컴포넌트한테 전달되어 화면에 렌더링 된다.

 

이런 식으로 부모인 App 컴포넌트를 거쳐서 건너건너 필요한 값을 업데이트 하고, 리렌더링 하는 방식으로 개발이 진행된다.

 

이러한 구조는 부모 컴포넌트에서 모든걸 관리하고 아래로 내려주는 것이기 때문에 직관적이기도 하고 관리하기도 편하지만, 앱의 규모가 커지면 문제가 된다.

컴포넌트의 개수가 늘어나고, 데이터도 늘어나고 그 데이터를 업데이트 하는 함수들도 늘어난다면 App의 코드가 매우 길어지고 이에 따라 유지보수도 어려워질 것이다.

 

문제가 되는 상황은 위와 같다.

이렇게 여러가지 컴포넌트를 거쳐야 한다.

 

이런 상황에서 리덕스를 사용한다면, 상태 관리를 바깥에서 할 수 있다.

리덕스를 사용하면 상태값을 컴포넌트에 종속시키지 않고, 상태관리를 컴포넌트의 바깥에서 할 수 있다. (store 설정)

 

리덕스를 프로젝트에 적용하게 되면 스토어 라는 것이 생기게 된다.

스토어 안에는 프로젝트의 상태에 관한 데이터 변수들이 담겨있다.

 

컴포넌트는 스토어에 구독을 하는 형태로,

특정 함수를 스토어에게 전달할 수 있다. (함수 선언)

나중에 스토어에 저장된 상태 변수들에 변동이 생긴다면 전달받았던 함수를 호출해준다.

 

이제 B 컴포넌트에서 어떤 이벤트가 생겨서 (클릭 등) 상태를 변화할 일이 생긴다면,

dispatch라는 함수를 통해 액션을 스토어에게 전달한다.

액션 : 상태 변화를 일으킬 때 참조할 수 있는 객체.

액션 객체는 필수적으로 type이라는 값을 가지고 있어야 한다.

type을 제외한 값은 선택적인 값이다.

 

- 리듀서를 통해 상태 변화하기

 

액션 객체를 받으면 전달받은 액션의 type에 따라 어떻게 상태를 업데이트 할 지 정의를 해주어야 한다.

이러한 업데이트 로직을 정의하는 함수를 리듀서라고 한다.

이 함수는 프로그래머가 직접 구현해야 한다.

리듀서 함수는 두가지의 파라미터를 받는다.

1. state : 현재 상태
2. action : 액션 객체

이 두가지를 참조하여 새로운 상태 객체를 만들어서 이를 반환해준다.

 

- 상태에 변화가 생기면 구독하고 있던 컴포넌트에게 알림

 

상태 변수 등에 변화가 생기면, 이전에 컴포넌트가 스토어에게 구독 할 때 전달했었던 함수를 호출하고, 이를 통해 컴포넌트는 새로운 상태를 받게되고, 리랜더링을 하게 된다.

 

 

정리하자면,

리액트는 기존에는 부모에서 자식의 자식까지 흐르며 변수나 상태 등을 변경했었는데,

리덕스를 사용하면 스토어라는 공간을 사용하여 상태를 컴포넌트 구조의 바깥에 두고, 중간자로 사용하며 프로젝트의 상태를 업데이트 하거나, 새로운 상태를 전달받는다.

따라서, 여러 컴포넌트를 거쳐서 받아올 필요 없이 깊이 연결되어 있는 컴포넌트여도 직속 부모에게 받아오는 것 처럼 원하는 상태값을 골라서 props를 편리하게 받아올 수 있다.

 

출처 : https://velopert.com/3528

리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i) | VELOPERT.LOG