Redux에 대해 알아봅시다

돌리의 하루·2023년 2월 24일
0

우리는 지금까지 react의 state로 상태를 관리해왔습니다🐹!
각각 상태를 관리해줄 수 있게 컴포넌트 별로 만들고, 컴포넌트가 각각 필요한 상태를 부모에게서 공유받는 형태였죠!

그런데 컴포넌트가 상태를 받을때, 비효율적인 방식으로 받는다면 어떻게 될까요🤔?

위의 그림처럼, 컴포넌트3과 컴포넌트 6에서만 사용되는 상태가 있다면
이 상태를 위치시켜야 하는 컴포넌트는 어디일까요?

react로 따지자면, 맨 위쪽 공통부모인 최상위 컴포넌트에 위치시키는 것이 best일겁니다.

하지만 이러면 너무 비효율적인것같지 않나요?
컴포넌트 구조가 바뀐다면, 데이터의 흐름을 완전히 바꿔야할수도 있습니다!😲
props가 여러 컴포넌트를 거치면서 불필요한 리렌더링이 발생하고,
굳이 상태를 가져야하지 않는 컴포넌트1과 컴포넌트2도 상태 데이터를 가져야하겠죠. 각각 컴포넌트3과 컴포넌트 6을 자식으로 가졌기 때문에요! 연좌제 같은겁니다!
그러면 어떤 방법으로 효율적인 데이터 흐름을 만들수있을까요?
개발자는 귀찮은걸 극도로 싫어합니다... 우리는 언제나 답을 찾을것입니다! 늘 그래왔듯이!

위에서 겪은 불편함 때문에 나온 것이 바로 Redux입니다.

Redux를 사용하게 되면 전역상태를 관리할 수 있는 저장소인 Store를 제공하고, Store에서 필요한 상태를 꺼내쓸 수 있게됩니다. 완전 편리하죠?😎


💌Redux의 구조와 순서

Redux의 중요 키워드는 이렇습니다.🔑

Action객체
Dispatch함수
Reducer함수
전역 상태 저장소 Store

처음에는, 상태 변경되어야 하는 이벤트가 발생할 때 상태에 대한 정보가 담긴
Action객체가 생성됩니다.

👇

Action객체Dispatch함수인자로 전달됩니다.
👇

Dispatch함수Action객체를 다시 Reducer함수로 전달해줍니다.
👇

Reducer함수는 Action객체의 을 확인하고 그 값에 따라서 전역 상태 저장소 Store의 상태를 변경합니다.
👇

위의 순서가 모두 끝나고 상태가 변경된다면, React는 화면을 다시 렌더링합니다.

그렇다면 위 키워드가 각각 어떤일을 하는지, 무슨역할을 하는지 알아보겠습니다🐹


📚Store

; 상태가 관리되는 오직 하나뿐인 저장소입니다.
Redux앱의 상태가 저장되어 있습니다.

import { createStore } from 'redux';

const store = createStore(rootReducer);

위의 코드를 통해서 Reducer을 연결하고 Store를 생성합니다.

📚## Reducer
; Dispatch에게 전달받은 Action객체의 type값에 따라서 상태를 변경시키는 함수입니다. Reducer는 순수함수여야합니다. 외부 요인으로 값이 엉뚱하게 바뀌는 일이 없어야 하기 때문입니다.

여러개의 Reducer를 사용하는 경우, Redux의 combineReducers 메서드를 사용해서 하나의 Reducer로 합쳐줄 수 있습니다

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  counterReducer,
  anyReducer,
  ...
});

📚Action

; 말 그대로 어떠한 액션을 취할거니? 라고 정의해놓은 객체입니다.
형식은 아래와 같습니다.

// payload가 필요 없는 경우
{ type: 'INCREASE' }

// payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5 }

type은 필수로 지정해주어야합니다.
type은 Action 객체가 어떤 동작을 하는지 명시해주는 역할이기 때문입니다.
필요에 따라 payload를 작성해서 구체적인 값을 전달합니다.

보통은 Action객체를 직접 작성하기 보다, Action 객체를 생성하는 함수를 만들어서 사용합니다. 이런 함수를 액션생성자라고 부릅니다.

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

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

📚Dispatch

; Reducer로 Action을 전달해주는 함수입니다.
Dispatch의 전달인자로 Action 객체가 전달됩니다.

// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );

여기까지 Redux를 구성하는 개념요소들이었습니다!📖
그렇다면 이제 이 요소들을 연결할 방법은 무엇일까요?
우리는 Redux Hooks에서 제공하는 메서드를 통해 연결시켜줄겁니다!

크게 두 가지로 알아볼 수 있습니다.

useSelector()
useDispatch()

🥐useSelector()

; 컴포넌트와 state를 연결해서 Redux의 state에 접근할 수 있게 해주는 메서드입니다.

// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러옵니다.
import { useSelector } from 'react-redux'
const counter = useSelector(state => state)
console.log(counter) // 1

🥐useDispatch()

; Action 객체Reducer로 전달해 주는 Dispatch 함수를 반환하는 메서드입니다. 위의 요소 중 하나인 dispatch 함수도 이를 이용한것입니다😎

import { useDispatch } from 'react-redux'

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

dispatch( setNumber(5) )
console.log(counter) // 5
profile
진화중인 돌리입니다 :>

0개의 댓글