안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.
이번 포스팅에서는 리액트로 개발을 할 때 리덕스 세팅하는 방법에 대해서 다뤄볼건데요.
하... 리덕스....
다른 분들은 어떠실지 모르겠지만, 저는 참 리덕스라는 늪에서 굉장히 오래 허우적댔습니다.
리덕스 개념은 알겠는데, 막상 실무에 쓰려고 하니 대입이 안 되더라구요.
그래서 이 글은 제가 실무에서 리덕스를 사용할 때 보려고 적는 글이기도 합니다.
리덕스 용어나 개념 정리는 나중에 다시 포스팅하기로 하고,
이번 포스팅에서는 리덕스 용어나 개념을 알고 있는 분에게 도움이 될 수 있도록
리덕스 세팅하는 방법에 대해 서술하겠습니다.
1. npm 설치
vscode에서 리덕스 사용을 원하는 프로젝트를 열어주세요.
그 다음, 터미널을 열고 아래의 명령어를 입력하여 리덕스 사용에 필요한 패키지를 설치합니다.
터미널은 [ Ctrl + ` ]로 열 수 있습니다.
$ npm i react-redux
$ npm i redux
2. 폴더 및 파일 생성하기
react 프로젝트를 생성했다면 src 폴더가 자동으로 생성됩니다.
해당 폴더 안에 Components와 Redux라는 폴더를 생성해 주세요.
그리고 아래 이미지처럼 파일을 생성합니다.
Components 폴더 안에 2개 파일을 만들어 주세요.
1) GetValue.js (리덕스로 데이터를 전달 받을 컴포넌트)
2) MyComponents.js (데이터를 리덕스로 보낼 컴포넌트)
그 다음 redux 폴더 안에 3개 파일을 만들어 주세요.
1) actions.js
2) reducer.js
3) rootReducer.js
3. actions.js 작성하기
액션 타입 + 액션 생성 함수 있는 파일
const actions = {
/* 타입 정의 */
DATA_CHANGE = 'DATA_CHANGE';
/* 액션 생성 함수 */
dataChange = (value) => ({
type: DATA_CHANGE,
value
});
};
export default actions;
4. reducer.js 작성하기
초기값 state + 리듀서 있는 파일
import actions from './actions';
/* 초기값 세팅 */
const initialState = {
Name: '',
Address: '',
Tell: ''
}
/* 리듀서 만들기 */
export default function reducer(state = initialState, action) {
// state의 초깃값을 initialState로 지정
console.log('asfadsfsd')
switch (action.type) {
case actions.DATA_CHANGE:
console.log(action)
return {
...action.value
};
default:
return state;
}
}
5. rootReducer.js 작성하기
모든 리듀서 합치는 파일
import { combineReducers } from "redux";
import reduer from './reducer';
/* 루트 리듀서 생성 */
const rootReducer = combineReducers ({
reducer
})
// export default rootReducer;
6. index.js 파일에 store 생성
store는 최상위 부모 파일에 생성합니다. (Provider안에서 store를 사용하겠다는 뜻)
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from '../src/Redux/actions';
// 늘 최상위 부모 코드에 STORE 생성하고 Provider로 감싸주기
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
7. 컴포넌트에서 useDispatch로 redux store에 값 전달
dispatch랑 actions 모두 import 해줍니다.
저희는 지금부터 mycomponent라는 컴포넌트에서 => getValue라는 컴포넌트로 값을 보내줄 거예요.
// myComponent.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { dataChange } from '../../Redux/actions';
const MyComponent = () => {
// dispatch로 Store에 데이터 저장
const dispatch = useDispatch();
// 인풋 내용 바뀔 때마다 store에 value 저장
const changeInputValue = (e) => {
value[e.target.name] = e.target.value
dispatch(dataChange(value));
};
return (
<>
<input
name="Name"
onChange={changeInputValue}
type="text"
/>
<input
name="Address"
onChange={changeInputValue}
type="text"
/>
<input
name="Tell"
onChange={changeInputValue}
type="text"
/>
</>
)
}
export default MyComponent;
8. 컴포넌트에서 useSelector로 redux store에 저장된 값 가져와서 사용하기
useSelect를 import 해주세요.
useSelect를 사용하여 redux store에서 값을 불러와서 보여주세요.
// getValue.js
import React from 'react';
import { useSelector } from 'react-redux';
const GetValue = () => {
// useSelector로 store에 저장되어 있는 내용 가져오기
const allData = useSelector(state => state.reducer);
return (
<>
<p>{allData.Name}</p>
<p>{allData.Address}</p>
<p>{allData.Tell}</p>
</>
}
}
export default GetValue;
완성!
이렇게 인풋에 입력한 내용을 리덕스에 저장하여 사용할 수 있습니다.
리액트에서 리덕스 사용할 때마다 이 포스팅 보고 작성하면 도움이 많이 되실 거예요 :)
