Redux 왜 배워야 하나

• 리액트 : 상태와 속성(props)을 이용한 컴포넌트 단위 개발 구조와 방법을 학습
• 리덕스 : 컴포넌트와 상태를 분리하는 패턴을 연습
  => 리덕스는 전역 상태를 관리할 수 있는 저장소인 Store를 통해 상태 관리를 보다 효율적으로 할 수 있게 도와줌

Redux 상태 관리 flow

1. 상태 변경 이벤트 발생 -> 변경될 상태 정보가 담긴 Action 객체 가 생성됨
2. Dispatch 함수는 이 Action 객체를 인자로 Reducer 함수에 전달해 줌
3. Reducer 함수는 Action 객체를 확인하고, 그에 따라 전역상태 저장소 Store 의 state를 변경함
4. 상태가 변경되었으므로 React 는 화면을 렌더링함

   전반적인 흐름

   • 상태 변경 이벤트 -> Action -> Dispatch -> Reducer -> Store -> 렌더링

Store

---

개념 : state(상태)를 저장하고 관리하는 하나뿐인 저장 공간
생성 : createStore 메서드를 활용 ⇒ Reducer를 연결해서 Store를 생성

import { createStore } from 'redux'

const store = createStore(rootReducer)

1. redux 와 react-redux 설치
2. import { Provider } from 'react-redux' 불러오기 ⇒ 저장소(store)를 사용하게 해주는 Provider 컴포넌트를 쓰기 위해 불러오는 것
3. 저장소를 사용할 컴포넌트를 Provider 컴포넌트로 감싸줌 ⇒ 전역에서 사용할거니까 보통 App 컴포넌트를 감싸주는 듯
4. import { createStore } from ‘redux’ 불러오기 ⇒ 저장소 생성을 위한 createStore 메서드 사용을 위해 불러오는 것
5. createStore 메서드로 저장소를 만들어 선언한 변수(저장소 이름)에 할당. 이때 createStore 메서드 인자로 Reducer 함수를 전달해야함

Reducer

---

Dispatch에서 전달받은 Action 객체의 type값에 따라서 상태(state)를 변경시키는 함수
여러개의 Reducer 를 사용하는 경우
⇒ Redux의 combineReducers메서드를 사용해서 하나의 Reducer로 합쳐줌
reducer 는 action 타입을 참조하여 구체적으로 어떻게 state를 변경할지를 작성해놓음(구체적이고 실질적인 setState 행위 메뉴판 같은?)

Action

---

어떤 액션을 취할 것인지 정의해 놓은 객체(액션 메뉴판 같은?)
보통 Action 객체를 생성하는 함수(액션 생성자, Action Creator)를 만들어 사용하는 경우가 많음
payload 가 필요한지에 따라 Action 객체의 형식이 구분됨
필요에 따라 payload 를 작성해 구체적인 값을 전달할 수도 있음
작성 형식은 보통 대문자와 Snake Case로 작성

Dispatch

---

Reducer로 Action을 전달해주는 함수
dispatch 함수의 전달인자로 Action 객체가 전달됨

Redux Hooks

---

useDispatch()

Action 객체를 Reducer로 전달해 주는 dispatch 함수를 반환하는 메서드

// App.js 파일 (즉 dispatch 함수를 적용할 파일에서 해야 함)

import { useDispatch } from 'react-redux'  // useDispatch 메서드를 쓰기 위해 불러옴

const dispatch = useDispatch()  // 
dispatch( increase() )
console.log(counter) // 2

dispatch( setNumber(5) )
console.log(counter) // 5

useSelector()

컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드

// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러옴을 주의
import { useSelector } from 'react-redux'

const counter = useSelector(state => state)
console.log(counter) // 1

Redux의 세가지 원칙

---

1. Single source of truth

동일한 데이터는 항상 같은 곳에서 가지고 와야 한다.

Redux에는 데이터를 저장하는 공간은 Store 단 하나뿐임

2. State is read-only

상태는 읽기 전용

React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼,

Redux의 상태도 직접 변경할 수 없고 Action 객체가 있어야만 상태를 변경할 수 있음

3. Changes are made with pure functions

변경은 순수함수로만 가능

순수함수로 작성되어야하는 Reducer 와 연결되는 원칙

---

과제나 실제 애플리케이션에서는 components, pages 뿐만 아니라 actions, store, reducers 로 폴더와 파일을 구조화해서 작업하므로 케이스들을 보면서 어느 파일에서 어떤 부분을 작성해서 연결하고 이벤트가 발생하는 위치에서 dispatch 함수를 써서 전달하는지 정리가 필요한 것 같다.