본문 바로가기

Redux2

[Redux] 무작정 시작하기 (2) - 간단한 예제 2020/04/23 - [Font-end/Javascript] - [Redux] 무작정 시작하기 (1) - Redux란? 서론 지난 포스트에서 Redux에 대해서 간단하게 정리해보았다. 상태관리가 복잡한 클라이언트 사이드 렌더링에서 많이 사용되는데 실제 예제를 통해 어떻게 사용되는지 알아보도록 하자. 1. Redux 프로세스 Redux는 단 1개의 저장소(Store)를 가지고 있다. 이 저장소에 저장된 상태(State)는 불변가변성(Immutable)의 성격을 지니는데, 이를 변경하려면 미리 정의된 행동(Action)을 리듀서(Reducer)에게 요청(Dispatch)해야한다. 그러면, 리듀서는 요청받은 행동과 상태를 확인하고, 상태를 복제하여 새로운 상태값을 적용한다. 처리가 완료되면 저장소를 구독(S.. 2020. 4. 24.
[Redux] 무작정 시작하기 (1) - Redux란? 서론 Javascript로 클라이언트 사이드 렌더링을 구현하다보면 부모 컴포넌트의 상태가 변경될 때, 자식 컴포넌트의 상태도 변경되는 경우가 많다. 이런 경우에는 부모가 자식에게 변경된 상태를 전달하여 변경되었음을 직접 알려주어야 한다. 그런데, 부모에게 받은 상태값을 자신의 자식에게도 전달해야 하는 경우도 있다. 예를 들어, 메인화면에서 로그인을 했을 때, 헤더에는 유저의 정보를 보여주고, 메뉴목록에는 회원만 접근가능한 회원메뉴이 추가된다. 이 때 상태값의 흐름을 살펴보면 상위에서 하위로 계속 전달되는 것을 알 수 있다. [ '메인화면 > 헤더 > 유저정보' , '메인화면 > 메뉴목록 > 회원메뉴' ] 그렇다면, 로그인 여부에 대한 상태값을 필요로 하는 자식이 100-Depth에 있다고 가정해보자. 1.. 2020. 4. 23.