Redux란, 왜 사용?

Redux란

React를 사용할때 많이들 사용한다는 Redux. React는 view를 담당하는 라이브러리이며 각 컴포넌트에서 상태를 관리할 수 있지만 좀 더 효율적인 상태 관리를 위하여 Redux를 사용.

Redux 왜 사용?

페이스북에서는 데이터 수정이 dispatcher 한곳에만 가능하도록 제약하는 Flux 패턴을 지향했는데, Flux 패턴의 구현체인 Redux가 상태를 관리하는 Store는 하나만 존재하도록 제약을 추가하였다 한다.

React에서 컴포넌트는 상위 컴포넌트로 상태를 전달하게 되고 상위 컴포넌트에서 상태 변경을 하게 된다. 이런상태로 어플리케이션이 거대해지는 경우 상태가 여기저기 흩어지게 된다.

React에서 상태들은 트리형태로 상위에서 하위 계층으로 전달되며 프로퍼티를 통해 상태를 전달 받아 사용 할 수 있습니다. 하지만 하위 컴포넌트가 본인의 상태를 스스로 관리한다면? 프로퍼티를 전달하는 일을 줄일 수 있다.

여기서 한 예로

툴바 -> 메뉴 -> A버튼
    -> B버튼

위와 같은 형태의 컴포넌트가 존재한다고 하였을때 A버튼 컴포넌트 상태를 B버튼 컴포넌트가 필요로 할때 툴바에서 A버튼 컴포넌트의 상태를 가지게 된다. 이 경우 A버튼은 스스로 상태를 가지지 못하게 되고 툴바에서 내려주는 상태를 프로퍼티로 관리하게 되어 불필요한 상태 전달형태가 될 수 있다.

Redux를 사용하게 된다면 Store에서 상태를 관리한다. 그러면 트리형태로 상위에서 하위로 상태를 탐색 혹은 전달 없이 컴포넌트에서 Redux Store로 상태접근이 바로 가능하다.

Store

컴포넌트는 Store에 **subscribe(listener)**를 등록하여 상태가 변경될때마다 특정 함수를 실행 하게하고 반환되는 unsubscribe로 해제 가능하다. 그리고 getState 함수를 사용하여 현재 스토어 상태를 반환받을 수 잇다. Store에 액션은 **dispatch(action)**으로 action을 전달하고 액션으로 상태 변경시 subscribe로 등록했던 함수 가 실행될 것이다.

subscribe(listener) -> dispatch(action) : 상태 변경 -> listener -> component에서 상태 변경 인지 랜더링

dispatch로 전달된 action은 리듀서를 통해 정의되었던 업데이트 로직을 실행한다.