말머리
서론 없이 우선 구조를 살펴보자.
구조
리덕스는 도로규정으로 비유하자면 일방통행길 이다. (Flux 구조)
무조건 한 방향으로 이동하게 되어있다.
또한, 한 방향으로 이동하지 때문에, 불변성을 유지한다.
타 포스트 글에 자세히 나와있지만, 내가 느끼는 Redux의 동작순서는 아래와 같다.
Event(ex - click) > dispatch(with, 액션 함수) > reducer() > 리렌더링
설명 - 클릭 이벤트
- 먼저 사용자로 부터 이벤트(클릭)가 실행된다.
- 그리고
dispatch를 사용해 우리가 미리 작성해둔 함수의 실행을 요청한다. - 실행된
액션 함수는return값으로type과payload를 반환한다. (중요) - 반환된 값은
reducer에서action파라미터로 받을 수 있다. (이 부분이 이해과정에 납득하기 힘들었다.) reducer에서 받은 반환값 마다 미리 정의해둔case에 맞게store의 초기 상태값을 변경한다.store에 값이 변경되면, 해당 값을 사용하고 있는 컴포넌트 들은 리렌더링 된다.
리덕스에 대한 이해가 적어 말이 길어졌다.
다음
지금까지 내가 작성해본 redux 코드를 정리해보려 한다
<>{...}</>