TIL_Redux

💡 Flux 패턴

💡 Redux

전역상태를 관리할 수 있는 Store를 제공함으로써 Props Drilling 현상을 해결해주는 라이브러리

그동안 우리가 useState를 썼을 때 state는 Local Scope에서 사용 가능했다.
그렇기 때문에 다른 컴포넌트에서 state를 사용하려고 하면 props를 통해 전달해줘야 했다.

이러다보면, props Drilling이 발생하게 되고, 비효율적이게 된다.

Redux는 state를 Global Scope를 갖는 저장소에 저장하여 모든 컴포넌트에서 state를 사용할 수 있게 해준다.

💡 Redux 구조

Action → Dispatch → Reducer → Store

Redux의 흐름은 다음과 같다.

1. UI에서 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.
2. 생성된 객체는 Dispatch 함수의 인자로 전달된다.
3. Dispatch 함수는 전달받은 Action 객체를 Reducer 함수에 전달해준다.
4. Reducer 함수는 전달받은 Action 객체를 확인하고, 그 값에 따라 Store의 상태를 변경한다.
5. 상태가 변경되면, 리랜더링된다.

📌 Props Drilling

Props Drilling 이란, 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달할 때, 그 사이에 있는 컴포넌트가 props를 전달하는 용도로 쓰이는 현상

🔍 Store

상태가 관리되는 하나뿐인 저장소

import { createStore } from 'redux'
import { Provider } from 'react-redux';


const store = createStore(reducer);

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

createStore메소드를 사용하여 Reducer를 연결해 Store를 생성할 수 있다.

전역상태 저장소 store를 사용하기 위해서 App컴포넌트를 Provider로 감싸준 후 props로 변수 store를 전달해준다.
(App컴포넌트를 Provider로 감싸줬기 때문에 App컴포넌트에 포함된 모든 컴포넌트에서 Store의 state를 사용할 수 있다.)

이 때, Provider는 redux가 아닌 react-redux에서 import 해와야 한다.

🔍 Reducer

Dispatch에게서 전달받은 Action 객체의 type값에 따라 상태를 변경시키는 함수

const count = 1;

const reducer = (state = count, action) => {
	switch (action.type){
      case "INCREASE" :
        return state + 1;
        
      case "DECREASE" :
        return state - 1;
    }
}

이 때, Reducer는 순수함수여야 한다.
외부 요인으로 인해 예상치 못한 값의 변화를 방지하기 위해서이다.

❗️반드시 주의
reducer 함수에서는 새로운 상태를 생성하여 리턴해줘야 리랜더링이 된다.
그렇지 않고, state를 그대로 리턴해준다면 리랜더링이 발생하지 않는다.

🔍 Action

어떤 액션을 취할지 정의해 놓은 객체

📌 액션 생성자 (Action Creator)

Action을 직접 작성하기보다는 Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많은데, 이러한 함수를 액션 생성자라고 한다.

// payload가 필요없는 경우
export const increase = () => {
	return {
    	type: "INCREASE"
    }
}


export const decrease = () => {
	return {
    	type : "DECREASE"
    }
}

// payload가 필요한 경우
export const setNumber = (num) => {
	return {
    	type : 'SET_NUMBER',
      	payload : num
    }
}

위에서 본 Reducer에 전달될 Action에 대해 정의해준다.
이 때, Action객체에서 type은 필수로 지정을 해줘야 한다.
(어떤 동작을 하는지 알려주는 목적의 객체이기 때문)

type은 대문자로, Action 이름은 Snake Case로 작성해준다.

이 액션생성자는 다른 파일에서도 쓰이기 때문에 export 해준다.

🔍 Dispatch

Reducer로 Action을 전달해주는 함수

dispatch( increase() );

Redux의 구조에 속하는 Store, Reducer, Dispatch, Action의 구현이 끝났다면 이들은 연결시켜줘야 한다.
이 때, 사용되는 것이 React Hook이다.

🔍 React Hook

📌 useDispatch()

Dispatch함수를 리턴해주는 메소드

import { useDispatch } from 'react-redux'

const dispatch = useDispatch();

const plus = () => {
	dispatch(increase());
}

📌 useSelector()

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

import { useSelector } from 'react-redux'

const counter = useSelector(state => state)