상태관리
상태관리의 정의
쉽게 말하면 데이터를 관리하는 방법을 말한다. 프론트엔드에서 상태관리란 데이터를 설계된 UI, UX에 맞게 설계하고 구현하는 일이다. 또한 네트워크를 통해 서버로 전달되는 클라이언트의 요청에 따라 변화하는 상태를 관리하는 일이다.
상태관리에 라이브러리를 사용하는 이유
상태관리에 있어 전역적으로 데이터를 관리해야하는 경우가 생긴다. 이를테면 대표적으로 로그인한 유저의 데이터나 인증정보를 여러 페이지에서 관리해야 되는 경우이다. React를 사용하는 경우에는 단방향 데이터 바인딩으로 부모 컴포넌트로부터 아래로 쭉 내려가는 방식이므로 로그인한 유저 데이터와 인증정보가 필요한 컴포넌트, 아닌컴포넌트가 혼합된 경우 필요없는 컴포넌트까지 계속 props를 넘겨야 하는 경우가 있으며 이는 불필요한 데이터 낭비와 동시에 props drilling 으로 인해 props가 최초로 시작된 컴포넌트를 찾기가 어려워저 코드가 난잡해지는 문제가 있다. 이를 해결하기 위해 context API, Mobx, recoil, Redux 등의 여러 라이브러리가 전역적으로 상태관리를 도와주는 것으로 해결할 수 있다.
Redux
Redux의 특징
- Single source of truth
모든 상태는 하나의 store 안에 저장된다. 즉, 한개의 어플리케이션 안에는 하나의 스토어가 있다.
스토어를 여러개 생성시 상태를 관리해서는 리덕스를 사용하는 의미가 퇴색된다.
- State is read-only
상태는 읽기전용 데이터이며, 오직 액션만 상태를 변경할 수 있다.
3.변화를 일으키는 함수, 리듀서는 순수 함수여야 한다.
순수함수란? 반환(reture)값이 전달 인자(argument) 값에만 의존하는 함수.
전달받은 매게변수 state,action을 변형하지 않아야 하고, 반드시 새로운 상태를 반환 해야한다. 즉 데이터를 덮어 씌우는게 아니라 새로운 값을 반환해야 하는 것이다.
Redux의 장점
-
상태를 예측 가능하게 만든다.(순수함수를 사용하기 때문에)
-
유지보수에 유용하다.(전역적으로 상태관리를 하기 때문에 복잡성이 줄어든다)
-
디버깅에 유리 (redux dev tool의 구글 크롬 확장프로그램을 사용해 log를 확인 가능)
-
리덕스 미들웨어
다른 라이브러리도 전역적 상태관리가 가능하지만, 차별화된 부분은 리덕스 미들웨어라는 기능이다. 리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업을 할 수 있는 장점이 있다. 여러 장점 중, 보통 리덕스에서 미들웨어를 사용하는 주된 사용 용도는 비동기 작업을 처리 할 때 이다. 예를 들어 리액트 앱에서 우리가 만약 백엔드 API 를 연동해야 된다면, 리덕스 미들웨어를 사용하여 비동기 작업을 처리한다.
Redux 주요 용어
Store
Store는 상태가 관리되는 오직 하나의 공간이다. 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다. 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.
Action
Action은 앱에서 스토어에 운반할 데이터를 말한다. Action은 자바스크립트 객체 형식으로 되어있다. Action은 반드시 어떤 형태의 액션이 실행될지 나타내는 type 속성을 가져야 한다.
Reducer
Action을 바로 Store에 바로 전달하는 것이 아닌, Action을 Reducer에 전달해야한다. Reducer가 인자로 받은 Action의 상태를 보고 Store의 상태를 업데이트하는 것이다. Reducer는 액션(객체)를 받아 새로운 state(객체)를 반환하는 역할을 한다. Reducer는 인자를 두개 받는다. previous state, action 또한 작동 방식은 action이 어떻게 변경을 시키는지 Switch & case로 정의된다.
Action을 Reducer에 전달하기 위해서는 dispatch()라는 메소드를 사용해야한다.
Dispatch
Store의 내장함수 중 하나이며, 액션을 발생시키는 것 (액션을 파라미터로 전달 => dispatch(Action)) 액션 객체를 넘겨 상태를 업데이트하는 유일한 방법이다. 함수에서 액션을 파라미터로 전달하는데 그것을 디스패치 액션 이라한다.
Subscribe
Store의 내장함수 중 하나이며, 함수 형태의 값을 파라미터로 받아온다. subscribe 함수에 특정 함수를 전달하면, 액션이 디스패치 되었을때 마다 전달해준 함수가 호출된다.
