Redux 기본개념 2

Redux 쓰는 이유

1. Props 문법이 귀찮을 때 사용
2. State 변경 관리할 때 사용

---

• 하위 component에게 props를 통해 state를 전달해주고 싶을 때 모든 component를 거쳐가면 비효율적이니까 Redux라이브러리를 사용해서 전달해주면 좋음

• Redux 라이브러리를 설치하면 State를 보관하는 파일을 하나 만들 수 있음 (ex. store.js)

• 그리고 그곳에 State들을 다 보관함

• 그럼 모든 State들이 Props를 통하지 않고도 직접 State를 꺼내서 사용가능

---

1. Props 문법이 귀찮을 때 사용

Redux 설치/셋팅 예시

// index.js

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

const 체중 = 47;

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

let store = createStore(reducer)

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

• 이렇게 하면 State를 마음대로 보관할 수 있음

Component에서 store에 있는 state 사용하는 예시

// App.js

import { useSelector } from 'react-redux';

function App() {

	const 꺼내온것 = useSelector( (state) => state );
    
    return (
    	<div className="App">
        	<p>몸무게 : {꺼내온것}</p>
        </div>
    );
}

export default App;

• 이렇게 하면 꺼내온것에 47이 들어가고 return됨
• 따라서 모든 component가 Props없이 State를 직접 꺼내서 사용할 수 있기 때문에 Redux를 사용함

---

2. State 변경 관리할 때 사용

• State 관리가 용이

• 만약 store에 몸무게를 넣어놓고 각 component에서 꺼내서 변형해서 사용하고 있었는데 알 수 없는 에러가 발생한다면? -> 모든 component를 다 확인해봐야 함 -> 비효율적

• 이런 상황을 방지하기 위해 Redux를 사용해서 store에 수정 방법을 미리 모두 정의해놓음

• API를 만든다고 볼 수 있음

• 각 컴포넌트들은 직접 수정하지 않고 수정해달라고 요청만 하면 됨

• 수정 요청 받은 store.js는 요청대로 수정해주면 됨

장점

• 버그발생시 추적이 쉬움
• 큰 프로젝트 진행할때 필수임

예시 코드
: index.js (store.js도 됨)

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

const 체중 = 47;

// 증가 요청시 몸무게 + 1
// 감소 요청시 몸무게 - 1

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


let store = createStore(reducer)

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

• 이런 state 수정 방법을 Reducer라고 부름

컴포넌트에서 state 수정요청하려면?

• dispatch 사용

// App.js

import { useSelector } from 'react-redux';

function App() {

	const 꺼내온것 = useSelector( (state) => state );
    const dispatch = useDispatch()
    
    return (
    	<div className="App">
        	<p>몸무게 : {꺼내온것}</p>
            <button onClick={() => { dispatch({type: '증가'}) }}>더하기</button>
        </div>
    );
}

export default App;

• dispatch를 사용해서 요청명을 잘 적어주면 됨

---

리덕스와 같은 기능을 하는 라이브러리들

• ModbX
• Overmind.js
• Recoil