다음과 같은 구조를 가진 React 애플리케이션이 있다고 가정했을 때, 컴포넌트 3, 컴포넌트 6에만 사용되는 상태가 있다. 이 상태는 어느 컴퓨넌트에 위치시켜야 할까? 답은 React 데이터 흐름은 단방향으로 흐르기 때문에 최상위 컴포넌트에 위치시키는 것이 적절하다. 하지만 이런 상태 배치는 다음과 같은 이유로 비효율적이라고 느껴질 수 있다.
// payload가 필요 없는 경우
{ type: 'INCREASE' }
// payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5
// payload가 필요 없는 경우
const increase = () => {
return {
type: 'INCREASE'
}
}
// payload가 필요한 경우
const setNumber = (num) => {
return {
type: 'SET_NUMBER',
payload: num
}
}
➕ payload
const count = 1
// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (state = count, action) => {
// Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
switch (action.type) {
//action === 'INCREASE'일 경우
case 'INCREASE':
return state + 1
// action === 'DECREASE'일 경우
case 'DECREASE':
return state - 1
// action === 'SET_NUMBER'일 경우
case 'SET_NUMBER':
return action.payload
// 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
default:
return state;
}
}
// Reducer가 리턴하는 값이 새로운 상태가 됩니다.
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { legacy_createStore as createStore } from 'redux';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
{
/*
Reducer 함수의 첫번째 인자에는 기존 state가 들어오게 된다.
첫번째 인자에 default value를 꼭 설정해야 한다.
=> 그렇지 않을 경우, undefined가 할당돼 오류가 발생할 수 있다.
두번째 인자에는 action 객체가 들어오게 된다.
*/
}
const count = 1;
// Reducer를 생성할 때에는 초기 상태를 인자로 요구
const counterReducer = (state = count, action) => {
// Action 객체의 type 값에 따라 분기하는 switch 조건문
switch (action.type) {
//action === 'INCREASE'일 경우
case 'INCREASE':
return state + 1;
// action === 'DECREASE'일 경우
case 'DECREASE':
return state - 1;
// action === 'SET_NUMBER'일 경우
case 'SET_NUMBER':
return action.payload;
// 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
default:
return state;
}
};
// Reducer가 리턴하는 값이 새로운 상태가 된다.
// conterReducer를 createStore에 전달
const store = createStore(counterReducer);
root.render(
<Provider store={store}>
<App />
</Provider>
);
combineReducers
메서드를 사용해 하나의 Reducer로 합쳐줄 수 있다.import { combineReducers } from 'redux';
const rootReducer = combineReducers({
counterReducer,
anyReducer,
...
});
import { createStore } from 'redux';
const store = createStore(rootReducer);
➕ 전역 변수 저장소 설정 방법
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
{/*
react-redux에서 Provider 불러오기
Provider는 store를 손쉽게 사용할 수 있게 하는 컴포넌트
Store를 사용할 컴포넌트를 감싸준 후, Provider 컴포넌트의 Props로 store 설정
*/}
import { Provider } from 'react-redux';
{/*
redux에서 createStore 불러오기
*/}
import { legacy_createStore as createStore } from 'redux';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
const reducer = () => {};
{/*
변수 store에 createStore 메서드를 통해 store 만들어 주고 createStore의 인자로 reducer 함수 전달
*/}
const store = createStore(reducer);
root.render(
{/*
전역 상태 저장소 store 사용을 위해 App 컴포넌트를 Provider로 감싼 후, Props로 변수 store 전달
*/}
<Provider store={store}>
<App />
</Provider>
);
// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );
// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );
import { useDispatch } from 'react-redux'
const dispatch = useDispatch()
dispatch( increase() )
console.log(counter) // 2
dispatch( setNumber(5) )
console.log(counter) // 5
[useDispatch 실습]
import React from 'react';
import './style.css';
// react-redux에서 useDispatch 불러오기
import { useDispatch } from 'react-redux';
// Action Creater 함수 increase, decrease 불러오기
import { increase, decrease } from './index.js';
export default function App() {
// useDispatch의 실행 값를 변수에 저장해서 dispatch 함수를 사용
const dispatch = useDispatch();
console.log(dispatch);
const plusNum = () => {
// 이벤트 핸들러 안에서 dispatch를 통해 action 객체를 Reducer 함수로 전달
dispatch(increase());
};
const minusNum = () => {
// 이벤트 핸들러 안에서 dispatch를 통해 action 객체를 Reducer 함수로 전달
dispatch(decrease());
};
return (
<div className="container">
<h1>{`Count: ${1}`}</h1>
<div>
<button className="plusBtn" onClick={plusNum}>
+
</button>
<button className="minusBtn" onClick={minusNum}>
-
</button>
</div>
</div>
);
}
// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러옵니다.
import { useSelector } from 'react-redux'
const counter = useSelector(state => state)
console.log(counter) // 1
[useSelector 실습]
import React from 'react';
import './style.css';
// react-redux에서 useDispatch, useSeletor 불러오기
import { useDispatch, useSelector } from 'react-redux';
import { increase, decrease } from './index.js';
export default function App() {
const dispatch = useDispatch();
{
/* useSelector의 콜백 함수의 인자에 Store에 저장된 모든 state가
담긴다. 그대로 return을 하게 되면 Store에 저장된 모든 state를
사용할 수 있다. */
}
const state = useSelector((state) => state);
{
/* 변수 state를 콘솔에서 확인, Store에 저장된 기존 state 값인
1이 찍히는 것을 확인할 수 있다. */
}
console.log(state);
const plusNum = () => {
dispatch(increase());
};
const minusNum = () => {
dispatch(decrease());
};
return (
<div className="container">
{/* Store에서 꺼내온 state를 화면에 나타내기 위해 변수 state를 활용 */}
<h1>{`Count: ${state}`}</h1>
<div>
<button className="plusBtn" onClick={plusNum}>
+
</button>
<button className="minusBtn" onClick={minusNum}>
-
</button>
</div>
</div>
);
}
// +, - 버튼을 누를 때마다 state가 변경되는 것을 확인할 수 있다!