[React] 컴포넌트 A는 리덕스 스토어를 구독하고 있다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정) 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는 지 흐름을 그려보자
React
✍️ 리덕스 전체적인 흐름
- UI에서 컴포넌트 내에 존재하는 이벤트가 호출된다.
- 이벤트와 연결된 액션 생성자(함수)가 호출된다.
- 액션 생성자에서 생성된 액션이 호출된다.
- 액션이 리듀서로 전달된다. 이 과정을 디스패치에서 담당한다.
- 디스패치된 액션에 따라 기존의 상태값과 액션을 통해 다음 상태값으로 변화할 수 있도록 한다.
- 렌더링되어 UI에 나타난다.
출처: gusdh2
👉 컨포넌트(Component)
:유저가 사용하는 시스템에 대한 조작장치를 이야기 한다.
통상 컨트롤(Control)이라고도 하고 UI라고도 한다.
👉 컴포넌트의 종류
- page : 모든 구성요소를 포함하는 가장 큰 단위로 single template, multi-page template이 있다
- dialog : 대화상자
- header bar : 상단에 위치하면서 제목을 표시하고 페이지 이동과 관련된 버튼이 위치한다.
- footer bar : 페이지 하단에 위치하면서 버튼이 위치한다.
- navbars : 일반적으로 header bar나 footer bar 내에 위치하면서
특정한 페이지로 이동하는 메뉴의 역활
- button : 버튼
- form : 사용자로부터 데이터를 입력받는 컨트롤
- list view : 여러개의 항목을 열거하는데 사용되는 컨트롤👊 Redux
JavaScript 상태관리 라이브러리. 리덕스의 본질은 Node.js 모듈
👊 Redux가 필요한 이유
React에서 state관리를 충분히 진행할 수 있지만, Redux가 등장하기 전에서 프론트엔드의 데이터 흐름을 관리하는 방식은 MVC(Model, View, Controller) 패턴이었다.
MVC 패턴은 state가 변화하게 되면, View, Model, Controller에 이벤트가 발생하고 값이 변하는 등, 복잡하고 데이터 흐름을 파악하기 힘든 구조로 되었다. 원인은 '양방향 데이터 흐름' 이기 때문이다. 프로젝트가 커질수록 데이터 흐름을 제어하는 과정이 복잡해지고 불편성이 커지기 시작했다.
이와 같은 문제를 해결하기 위해서 '단방향 데이터 흐름' 특징을 갖는 라이브러리인 Redux를 사용하여 개선할 수 있었다.
보통 상위 컴포넌트에서 하위 컴포넌트의 상태를 관리하면서 한 번에 렌더링 하는 경우가 많은데, 그렇게 되다 보면 불필요한 리렌더링이 발생하면서 프로젝트의 규모가 커지다 보면 성능에도 문제가 끼칠 수 있다.
왼쪽은 Redux를 사용하지 않을 때, 오른쪽은 Redux와 같이 개발을 할 때의 차이를 보여주는 그림이다.
예시로, 왼쪽 이미지(Redux를 사용하지 않을 때)는 최상위 컴포넌트에서 댓글의 데이터를 관리한다고 가정하고, 자식 컴포넌트에서도 댓글에 대한 데이터를 사용하고, 그 자식의 컴포넌트에서도 댓글에 대한 데이터를 사용한다면 최하위 자식 컴포넌트에서 댓글의 추가나 삭제가 일어날 때, 컴포넌트를 하나하나 타고 최상위 컴포넌트까지 올라가서 데이터의 변경을 알려줘야 한다. 그러면 중간 컴포넌트들에 대해서는 무분별한 렌더링이 일어나는 것뿐만 아니라, 컴포넌트가 100개 1000개가 된다고 가정하면 관리하기가 매우 힘들어질 것이다.
오른쪽 이미지(Redux를 사용할 때)는 최상위 컴포넌트에서 관리하는 것이 아닌, Redux Store에 따로 댓글에 대한 데이터를 관리하고 있으면 댓글의 추가나 삭제가 일어날 때 컴포넌트를 하나하나 타고 올라가지 않고, 해당 컴포넌트에서 바로 Store에 접근해서 사용할 수 있어서 성능적으로도 좋을뿐더러, 관리하기가 매우 수월해질 것이다.
👉 리덕스 장단점
- 장점
1. state를 쉽게 관리할 수 있다
2. 웹사이트의 상태를 어디서 관리할지 고민하지 않아도 된다.
3. 어떤 액션이 취해졌고, 어떤 데이터가 어떻게 변경되었는지 쉽게 알 수 있다.
- 단점
1. 러닝 커브가 크다
Redux개념을 익히기 위해서 많은 시간을 투자해야 된다
2. 방대한 코드량
Redux를 통해서 작은 기능을 구현하려 해도 많은 코드양이 필요하다.
👉 리덕스의 기본 개념,세 가지 원칙
1. Single source of truth
동일한 데이터는 항상 같은 곳에서 가지고 온다.
즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미다.
2. State is read-only
리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
3. Changes are made with pure functions
변경은 순수함수로만 가능하다.
리듀서와 연관되는 개념이다.
Store(스토어) – Action(액션) – Reducer(리듀서)
👉 Store, Action, Reducer의 의미와 특징
- 스토어(Store)
상태가 관리되는 오직 하나의 공간이다.
컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.
- 액션(Action)
액션은 앱에서 스토어에 운반할 데이터를 말한다. (주문서)
액션은 자바스크립트 객체 형식으로 되어있다.
- 리듀서(Reducer)
액션을 스토어에 바로 전달하는 것이 아니다. 액션을 리듀서에 전달해야한다.
리듀서가 주문을 보고 스토어의 상태를 업데이트하는 것이다.
액션을 리듀서에 전달하기 위해서는 dispatch() 메소드를 사용해야한다.출처 및 자세한설명과 예시: hanamon
👉 리덕스 키워드
- Store
어플리케이션의 상태 값들을 집중적으로 관리한다.
상태 값들을 가지고 있으며 중앙에서 값들을 관리하는 개념으로 생각하면 된다.
Reducer에서의 데이터 변화를 확인하고 상태 값을 변경한다.
- Action
Redux를 움직이게 만드는 함수 같은 개념이라 생각하면 간단하다.
상태에 어떤 변화가 필요할 경우 참조하는 객체로, 우리는 스토어에 직접 접근할 수 없기 때문에
액션을 먼저 발행한 다음 스토어에서 이 액션을 접수했을 때 상태를 갱신하게 만들 수 있다.
액션은 어떤 형태로 실행될 지 명시해주는 type 속성을 반드시 가져야한다.
액션 생성함수는 액션을 만드는 함수로, 파라미터를 가져와 액션 객체 형태로 만들어준다.
액션을 사용하기 위해 반드시 액션 생성함수를 만들어야 하는 것은 아니지만,
나중에 컴포넌트에서 쉽게 액션을 발생시키기 위해서 작성해주는 것이다.
- Reducer
상태에 변화를 일으키는 로직을 가진 함수로, 이전의 상태와 액션을 합쳐서 새로운 상태를 만든다.
따라서 리듀서는 상태, 액션이라는 두 파라미터를 받아오고, 새로운 상태를 만들어 반환한다.
* 초기 상태는 리듀서의 디폴트 인수에서 정의한다.
* 리듀서 함수는 순수함수여야하고, 결과 값을 출력할 때 파라미터의 에 의존해야 하고,
같은 결과를 출력해야한다.
* 리듀서 함수에서 상태를 사용하면 반드시 상태의 초기화가 필요하다.
* 상태가 변할 때 전해진 상태는 자체의 값으로 대체 되는 것이 아니고,
합성이 되는 것처럼 쓰여지며 반환된 상태는 스토어에 반영된다.
* Object.Assign()을 사용하거나, sperad 문법을 사용해 새로운 객체를 리턴해주어야한다.
- Dispatch
store의 내장함수 중 하나다.
action을 발생시키는 것이 dispatch이며, dispatch라는 함수에 파라미터로 action을 전달한다.
호출이 되면 store에서 reducer 함수를 실행시키고, 해당 액션을 처리하는 로직이 있을 경우
액션을 참고하고 새로운 상태로 만들어준다.
- Subscribe
스토어의 값이 필요한 컴포넌트는 스토어를 구독하는데,
이 작업은 react-redux의 connect 함수가 필요하다.