상태란?
페이지 내에서 눈에 보이는 데이터 뿐 아니라 서버와 주고받는 모든 데이터를 상태 라고 하며 이를 관리하는것을 상태관리라 칭합니다.
이 글은 state관리의 까다로움을 몸소 체험해보고 보면 좋음
상태관리란?
SPA를 사용하는 최근의 웹 페이지는 한 페이지 안에서의 실시간 데이터 이동량이 매우 많다. 그래서 필요한게
상태관리라는것이다. 이는 동기화방식이든 비동기화 방식이든 데이터가 언제, 어떻게, 왜? 변화 했는지 파악하고 상황 제어를 할수있어야한다.
해당 사진에서 상태관리시 신경 써야할 것들 및 상태의 예시들.
화면 내에 특정 UI를 노출할지 여부 -예시)프로필수정,새로만들기 버튼 등등
동적으로 변하는 팔로워,게시물의 수
사진이냐 비디오냐에 따른 UI 렌더링 유무
댓글에관한 실시간 알림
현재 보고 있는 페이지
로그인한 유저의 권한
text input의 입력 값
checkbox input의 선택 여부
인터넷 연결 유무
이러한 상태관리는 기존의 HTML DOM 방식으로 제어 및 작동되던 웹페이지에서 그 단점이 들어나서 나타난 변화로서
기존의 DOM만을 사용한 상태관리 방식은 많은 데이터 변화(여러번의 렌더링과 같은)가 일어날 경우 해당 데이터가 어떻게, 왜 어디로 처리되었는지 추적하기 힘들다.
html기반 dom에서의 상태관리는 상태가 변환 과정에 관해서 내가 직접 console.log를 사용해 일일히 추적해들어가야하기에 유지보수 관리 면에서 아주 어려웠다. 그래서 나온것이 자바스크립트 언어 기반의 상태관리 라이브러리 이다.
Redux란?
자바스크립트 상태관리 라이브러리 로서 아키텍쳐 내에서는 node js의 모듈로서 상태관리를 가능케한다.
리덕스 관리 모형의 간단한 작동 순서
1.사용자의 작동 및 다른 요인으로 인한 데이터 변화
2.리듀서가 이를 캐치하고 스토어로 보고
3.스토어에 보고된 변화가 ui에 반영
스토어,액션,리듀서의 간단한 작동특징
Store(스토어)는 상태가 관리되는 오직 하나의 공간이다.
- 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
- 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.
- 스토어는 컴포넌트를 구독하는 방식으로 상호작용된다.
Action(액션)은 앱에서 스토어에 운반할 데이터를 말한다. (주문서)
액션은 자바스크립트 객체 형식으로 되어있다.
- 액션은 Reducer(리듀서)에 전달해야한다.
- 액션을 Store(스토어)에 바로 전달하는 것이 아니다.
- 액션을 Reducer(리듀서)에 전달해야한다.
Reducer(리듀서)는 주문을 보고 Store(스토어)의 상태를 업데이트하는 것이다.
리듀서는 이전 상태와 동작을 받아 새 상태를 리턴한다
리듀서는 순수 함수 이며, db호출 http호출과 같은 외부데이터 구조를 변형 하는 호출은 사용하지않는다
순수 함수란?
부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수 , 외부의 상태를 변경하지 않는 함수
리덕스의 특징
특징1. single source of truth
리덕스는 상태관리를 쉽게 하기위해 dom과 같은 트리방식으로 페이지 데이터를 구조화 시키나 다른점이있다면
상태를 알아보기위해서 트리를 하나하나 내려가고 올라가는 기존의 dom과는 다르게 redux는 상태를 중앙 저장소에서 해당 트리노드(컴포넌트,state)로 즉각 이동시킨다. 각각의 노드는 스토어에 구독되있으며 변화가있으면 변화전의 내용,변화 후의 내용을 기록한다.
특징2. state is read only
The only way to change the state is to emit an action, an object describing what happened.
상태(state)는 action객체에 의해서만 수정된다.
@props 와 state
둘 다 렌더링에 영향을 주긴 하지만 props는 매개변수처럼 컴포넌트에 전달이 되는 반면
state는 컴포넌트 안에서만 관리가 된다. 또한 컴포넌트 내부에서 state값은 action 객체나 setState 여하에 따라 얼마든지 변경 가능하다 prop는 불가능하다.
특징3.
Changes are made with pure functions
To specify how the state tree is transformed by actions, you write pure reducers.
변경은 순수함수로만 가능하다.
위와같은 특징과 흐름은 데이터가 한 방향으로만 흐르게 하기 위해서 생긴 특징과 흐름이다.
리덕스의 장점:
순수함수를 사용한 예측가능한 상태를 만들어준다
리덕스 단점:
하나의 리듀서에서 관리하는 상태가 커질수록 코드가 복잡해진다
보일러 플레이트 코드를 많이 준비해야만 한다. (액션 타입, 액션 생성함수, 리듀서)
보일러 플레이트 코드란? 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드
