[Redux] 리덕스를 쓰는 이유가 뭘까

코딩애플 리덕스 입문강의 정리본입니다.

0. 리덕스는 상태관리 라이브러리이다

1. 리덕스는 Props 문법 귀찮을 때 쓴다.

리액트는 index.html 안에 Conponent라는 함수를 넣는 식으로 개발을 한다.
그런데 리액트는 자식 컴포넌트에 변수를 전달해줄 때 Props를 써줘야 한다.

손자 컴포넌트에 전달하는 방법은 Context에 대해 작성한 이 글을 참조하세요!
강의에서는 컴포넌트에 곧바로 전달하는 방법이 없다고 나오는데 context 방식이 있긴 하다. 실무에서 잘 안쓰는걸까..? Context API vs Redux 관련 글 참조하기

아무튼 컴포넌트 수가 많은 대형 프로젝트에서는 state를 전해주기 위해 props를 엄청나게 많이 써야 할 거다.

이런 경우에 리덕스가 유용하다.

리덕스를 설치하게 되면 store.js에 중요한 변수를 저장하고 필요한 컴포넌트에 직접 꺼내서 쓸 수 있다. (props가 필요 없어진다)

index.js

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

const 체중 = 100; // 여기에 state 맘대로 보관가능

function reducer(state = 체중, action) {
	return state
}

let store = createStore(reducer)

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

App.js

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

function App() {
	const 꺼내온거 = useSelector( (state) => state ); // 사용법
  
  return (
  	<div className="App">
    	<p>님의 처참한 몸무게 : {꺼내온거}</p>
    </div>
  );
}

export default App;

결론 : 리덕스를 사용하게 되면 모든 컴포넌트가 props 없이 state를 직접 꺼낼 수 있다.

2. 리덕스는 State 변경 관리할 때 쓴다.

위 코드에서 체중 state를 변경하기 시작하면 어떤 컴포넌트는 체중 + 1,
또 어떤 컴포넌트는 체중 - 1,
또 어떤 컴포넌트는 체중 / 100을 할 수도 있을 거다.

그런데 갑자기 버그가 생겼으면 어떡하지???

버그를 추적하려면 모든 컴포넌트의 코드를 뒤져봐야 하는걸까???

리덕스를 쓰면 이런 식으로 코드를 사용할 수 있다.

store.js

// 예시
var 체중 = 100;

체중 수정방법1 (ex 이거 누르면 체중 + 1)
체중 수정방법2 (ex 이거 누르면 체중 - 1)

각 컴포넌트는 위 체중 수정방법을 사용하겠다고 부탁하면 된다.
즉, 각 컴포넌트들은 수정요청만 가능하다.

그래서 버그를 추적할 때 범인은 무조건 store.js라서 state 변경 관리가 편하다고 할 수 있다.

index.js

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

const 체중 = 100; // 여기에 state 맘대로 보관가능

// 수정방법 정의
function reducer(state = 체중, action) {
	if (action.type === '증가') {
    	state++;
      	return state
    } else if (action.type === '감소') {
    	state++;
      	return state
    } else {
    	return state
    }
}

//function reducer(state = 체중, action) {
//	return state
//}

let store = createStore(reducer)

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

App.js

import './App.css';
import { useSeletor, useDispatch } from 'react-redux'; // useDispatch 사용

function App() {
	const 꺼내온거 = useSelector( (state) => state );
  	const dispatch = useDispatch(); // useDispatch 사용
  
  return (
  	<div className="App">
    	<p>님의 처참한 몸무게 : {꺼내온거}</p>
      	<button onClick={() => { dispatch(type : '증가') }}>더하기</button>
        <button onClick={() => { dispatch(type : '감소') }}>빼기</button>
    </div>
  );
}

export default App;