[ReactJS] Redux

 

Redux는 상태 관리 라이브러리로 state(변수)를  효율적으로 관리하기 위한 라이브러리 입니다.

 

state를 내부 컴퍼넌트에서 사용하기 위해서는 props문법을 사용해야 합니다 하지만, 많은 컴퍼넌트 중첩이 발생할경우 그에 따른 props가 필요하기 때문에 Redux라는 라이브러리르 사용하면 편하게 사용 가능합니다 .

 

 

---

Redux의 장점

장점 1. props를 사용하지 않아도 된다!

(기존 props를 통한 state 전달 )

 

 

• Redux를 설치하게되면 state를 보관하는 파일을 하나 만들수 있습니다. 여기에 모든 state를 보관합니다.

(Redux를 통한 state 전달)

 

 

 

 

사용 방법

1-1)  state 보관 파일 (store.js) 생성

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

const num = 100;   // state 맘대로 보관 가능

let store = createStore(resucer)

ReactDom.render(
	<React.StrictMode>
		<Provider store={store}>
			<App />
		</Provider>
	</React.StrictMode>,
	document.getElementById('root')
);

• Redux를 사용하기 위해 Provider, createStore를 import 받는다.

 

1-2) 컴퍼넌트에서 사용

import './App.css';
import { useSelector } from 'react-redux'

function App() {
	const weight = useSelector((state) => state);  // 보관한 state 가져오기

	return (
		<div className="App">
			<p>몸무게 : {weight}</p>
		</div>
	);
}
export default App

• 저장된 state를 사용하기 위해서 useSelector를 import 받는다.

---

 

장점 2. 상태관리(state)가 용이하다!

 

컴퍼넌트마다 state의 상태 값을 변경하게 되면 오류가 발생할시 찾기가 어렵다. 하지만, Redux를 통해 미리 state가 어떻게 변경될지 정의해두고 컴퍼넌트에서 요청만 하게되면 쉽게 관리할 수 있다.

 

 

사용 방법

2-1) state 보관함 (store.js)

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

const num = 100;   // state 맘대로 보관 가능


function reducer(state = num, action) {
	if (action.type === '증가') {
		state++;
		return state;
	} else if (action.type === '감소') {
		state--;
		return state
	} else {
		return state
	}
}

let store = createStore(resucer)

ReactDom.render(
	<React.StrictMode>
		<Provider store={store}>
			<App />
		</Provider>
	</React.StrictMode>,
	document.getElementById('root')
);

 

2-2) 컴퍼넌트에서 사용

수정을 요청하려면 dispatch를 사용

import './App.css';
import { useSelector, useDispatch } from 'react-redux'


function App() {
	const weight = useSelector((state) => state);  // 보관한 state 가져오기
	const dispatch = useDispatch()

	return (
		<div className="App">
			<p>몸무게 : {weight}</p>
			<button onClick={() => {dispatch(type : '증가')}}> 더하기 </button>
		</div>
	);
}
export default App