리딩 타임 10분

Redux to Your Rescue

레덕스의 가장 큰 장점은, 중앙에서 스테이트를 관리한다에 있죠. 이런 중앙에 뭔가가 없다면, 데이터를 컴포넌트에서 컴포넌트로 전달을 계속 해야 하는 아찔한 상황이 발생합니다.

따라서 Redux는 store를 하나 만들고, 그곳에 스테이트를 모아둔 후, 컴포넌트는 redux store에 연결이 되어 있는 구조 입니다. 필요할때 빼서 쓰고, 또 필요에 따라 업데이트를 해주면 되는거죠

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/98d4b86c-638f-4eea-94d2-ae9ff74a6ea9/Screen_Shot_2021-03-31_at_3.22.55_PM.png

이 일을 일어나기 위해, 레덕스는 다음과 같은 데이터 흐름으로 구성되어 있습니다.

  1. 컴포넌트에서 먼저 액션이라는 것을 dispatch 합니다.
  2. 이 action은 reducer를 호출 하고
  3. reducer는 조건에 맞춰서 state를 업데이트 해줍니다 (redux store)
  4. state가 바뀌면 그 스테이트를 get하고 있는 컴포넌트들이 조건에 맞춰 리렌더링 되게 됩니다. (혹은 새로 랜더링이 됩니다)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8cc5a6e8-f6f9-4d07-90d2-23def2bdce22/Screen_Shot_2021-03-31_at_3.31.13_PM.png

생소한 이름들이죠. 액션, dispatch, 그리고 reducer.

빠르게, 그리고 결코 얕지 않게 개념을 다뤄보겠습니다 (리딩 타임 5분 정도 소요)

일단 가장 마지막 부터 시작을 하는게 좋습니다. 우리는 State 개념을 알고 있고, 중앙 State 것이 얼마나 좋은 것인지를 알고 있습니다. 적절한 예시를 한 번 가져와봤습니다.