[230424 ~25] 리덕스 REDUX 정의

---

🍀 오늘의 날짜 : 23년 04월 24일 
🍀 오늘의 주제 : 리덕스

---

 

Redux

Redux 에서 애플리케이션을 만들 때, 보통은 하나의 루트 App.js 컴포넌트에서 상태를 관리합니다.  보통은 부모 컴포넌트가 중간자 역할을 하면서 컴포넌트끼리 직접 소통하는 방법은 권장되지 않습니다. React는 SPA(Single Page Application)을 만들기 위해 주로 사용되는데요 , React가 자체적으로 state와 props 를 관리할 수는 있지만 프로젝트 규모가 커지고 컴포넌트가 많아짐에따라 상태를 관리하기 힘들어집니다. 이러한 상태를 보다 편하게 관리할 수 있도록 도와주는 역할의 (독립형) 라이브러리가 Redux 입니다. 

 

 

* ref 를 사용해서 컴포넌트끼리 직접 소통할 수는 있다고 함

* (엄밀히 말하자면) Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 

 

 

Redux는 리액트와는 상관없는 라이브러리입니다. React-Redux는 React에서 사용할 수 있는 " 공식 " Redux UI 바인딩 라이브러리입니다. React-Redux를 이용해서 React와 Redux를 연결해서 사용하는 것입니다. 

 

참고 블로그 : Redux를 왜 쓸까?

 

 

 

---

 

 

>   설치 방법 

 *  일반적인 react 환경 ( CRA React ) 

    npm install redux react-redux 

   # redux 설치 + react-redux 설치가 이루어지는 형태

 

 *  Vite 환경

    npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

 

 *  TypeScript 사용 환경에서 추가로 설치 

    npm install @types/react-redux

 

 *  Next.js 환경

    npx create-next-app --example with-redux my-app

 

 

 

* redux-toolkit만 별도로 설치 

    npm install @reduxjs/toolkit

    

 

 

 

>   Redux의 주요 3가지 원칙!

1. Store는 글로벌 상에서 하나만 존재  - 하나의 Store에서 모든 상태가 관리되어야 한다는 의미

2. 상태는 읽기 전용 , Action 객체에 전달해야지만 변화 가능 

3. 변화는 순수함수로 작성

 

* 순수함수 : 외부의 개입 없이 동일한 인풋 값에 따라 항상 동일한 결과를 내보내는 함수 

Reducer가 이 부분에 해당합니다.

이전 상태의 액션을 받아 다음 상태를 반환하는 순수 함수 형태로 이전 상태값을 변경하는 것이 아닌 새로운 상태값을 반환합니다. 

 

 

 

Redux 는 다음과 같은 순서로 상태를 관리합니다.  아래에서 각 용어에 대한 설명과 흐름에 대해서 작성하겠습니다. 우선은 이러한 순서로 상태를 관리한다는 것을 알아두세용.

 

1. Action 객체 
2. Dispatch 함수
3. Reducer 함수
4. 전역 상태 저장소 Store

 

 

---

 

>   Redux 용어 설명과 흐름 설명

 

- Action : 어떤 액션을 취할 것인지 정의해 놓은 객체

상태가 변경되어야 하는 이벤트(Dispatch 실행)가 발생하면, 변경될 상태에 대한 정보가 담긴 ' Action 객체 ' 가 생성 됩니다. 

이 ' Action 객체 ' 는 ' Dispatch 함수 ' 의 인자로 전달됩니다. 

{ type: 'INCREASE' }

{ type: 'SET_NUMBER', payload : 5 }

** type 지정은 필수 , 필요에 따라 payload로 구체적인 값을 전달

 

 

보통은 Action 객체를 생성함수 ( 액션 생성자 ) 를 만들어 사용하는 경우가 많다고 합니다. 'INCREASE'를 편하게 사용하기 위해 미리 변수로 설정해서 사용할 수도 있습니다. 

Ex. const INCREASE = ' INCREASE ' ;

const increase = ( ) => {
    return {
         type: 'INCREASE'
    }
}

const setNumber = ( num ) => {
    return {
         type : 'SET_NUMBER',
         payload : num
    }
}

 

 

- Dispatch : Action 객체를 Reducer 로 전달

dispatch 메소드는 Reducer 를 호출합니다. 이때, ' useSelector( ) ' 메소드나 'useDispatch( )' 메소드를 이용하여 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주거나, Dispatch 함수를 반환함으로써 Reducer 로 Action 객체를 전달해주는 메소드를 사용합니다. 

 

엄밀히 말하자면 Dispatch가 새로운 action을 발생 시킬 때 Store가 이 새로운 action을 인식하고 Reducer을 실행 시키고 이후 나온 새로운 상태를 저장합니다.

[1] 직접 작성 방법
dispatch( { type : 'INCREASE' } );
dispatch( { type: 'SET_NUMBER' } );

[2] 액션 생성자 이용 방법
dispatch( increase ( ) );
dispatch( setNumber( 5 ) );

 

 

** useSelector ( ) : state  접근

** useDispatch ( ) : 변경된 값 action  객체로 전달

 

 

 

// useSelector
import { useSelector } from 'react-redux';

export const TempComponent = () => {
	const counter = useSelector((state) => state.counter);
    //store에 저장되어있던 상태값을 counter 변수에 넣어 불러올 수 있습니다. : read-only
    
    return (
    	<div>{counter}</div>
    )
}

//useDispatch
import { Dispatch } from 'redux';

export const TempComponent = () => {
	const dispatch = useDispatch();
    
    return (
    	<div>
        	<button onClick={() => dispatch({ type: 'INCREASE' })}>
            </button>
        </div>
    )
}

 

 

 

 

- Reducer

Dispatch에게 전달받은 ' Action 객체 ' 의 type 값에 따라서 switch 조건문으로 상태를 변경 시킵니다. 

Reducer는 현재 상태와 Action 객체를 받아 새로운 상태를 리턴하는 함수 역할을 합니다. 

// const count = 1
// state = count : 초기값 

const counterReducer = (state, action) => { 
     switch ( action.type ) {
           case ' INCREASE ' : 
                    return state + 1
          case ' DECREASE ' : 
                   return state  - 1
          case 'SET_NUMBER' : 
                   return action.payload
          default:
                  return state;
    }
}

** Reducer는 순수함수 여야 합니다. 다른 기대 효과를 발생시켜서는 아니됩니다

** combineReducers 메서드로 여러 개의 Reducer을 합칠 수 있습니다. 

 

 

 

- Store : 상태가 관리되는 오직 하나 뿐인 저장소

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

import { createStore } from 'redux';

const store = createStore(rootReducer);

 

createStore 메서드를 이용해서 Reducer을 연결 해서 store변수로 Store(저장소)를 생성합니다. 

 

 

 

- 최종 단계 :: 상태 변경 시 React는 화면을 다시 렌더링해서 보여줍니다. 

 

 

 

 

 

 

🔖 벨로퍼트와 리덕스

🔖 Redux 기반 , Part3:State, Action and Reducers

🔖 Redux rw;eruch

🔖flux

🔖flux로의 카툰 안내서

🔖redux : state, actions, and reducers

 

 

상태 관리 으렵다