🤔 리덕스란?
애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구이다.
복잡한 상태 관리가 이루어지는 SPA(Single Page Application)에서 유용하게 사용된다.
리덕스는 리액트 뿐만 아니라 jQuery, Angular 등을 사용하는 애플리케이션에서도 사용할 수 있다.
나는 리액트에서 사용하는 리덕스에 대해 알아볼 것이다 !
리액트의 데이터 흐름은 단방향이기 때문에, 부모 컴포넌트 안에 존재하는 자식 컴포넌트들은 부모 컴포넌트의 상태를 props로 전달받게 된다.
부모 컴포넌트의 상태값이 변하게 되면, 자식 컴포넌트는 변화된 상태에 맞게 data 나 ui를 변경한다. 즉, 리랜더링을 한다.
여기서! 컴포넌트는 다음과 같은 상황에서 리랜더링 된다.
1. 자신의 상태(state)값이 변경될 때
2. 부모 컴포넌트가 리랜더링될 때
3. 자신이 전달받은 props값이 변경될 때
4. 강제 업데이트 함수가 실행될 때
즉, 위와 같은 상황에서 부모 컴포넌트의 상태값이 변한다면, 부모 컴포넌트는 리랜더링 될 것이고, 자식 컴포넌트 또한 리랜더링 된다.
🔍 Redux를 쓰는 이유
1. 모든 컴포넌트들이 props문법 없이 state를 직접 꺼내쓸 수 있음 -> 부모 자식 간의 데이터 전달의 편리성을 위해
2. 상태(state) 관리의 용이 -> store안에 state수정 방법을 미리 정의해둔다. 컴포넌트들은 직접 state를 직접 수정하지 않고 수정 요청만 보내서 그냥 가져와쓰면 된다.
💡 장점
버그가 일어났을 때 추적이 쉬움. 버그가 생기면 범인은 무조건 store.js임.
여기서, 자식은 부모의 상태를 막 변경할 수 없다. props문법을 통해 전달받은 상태만을 변경할 수 있다.
따라서, 컴포넌트가 100개 중첩해서 있다면 state를 전달해주기 위해 엄청나게 많은 props문법을 사용해야한다.
리덕스를 설치하면 이 안에 상태들을 다 저장해두어 컴포넌트가 필요할 때 꺼내쓸 수 있다.
설치
npm install redux세팅 (이해할 필요 X, 방법일 뿐)
: 몸무게 증가를 예로 들어 설명하겠다
import { Provider } from 'react-redux'
import { createStore } from 'redux'
function reducer(state = 100, action){
return state;
}
let store = createStore(reducer);
ReactDOM.render(
<React.StricMode>
<Provider store={store}>
<App/>
</Provider>
</React.StricMode>
document.getElementById('root')
);🔨 컴포넌트에서 store에 있던 state를 쓰는 방법
: useSelector로 리덕스의 state를 조회한다.
function App(){
const 꺼내온거 = useSelect((state) => state);
}index.js
: store에 state 수정방법을 미리 정의한다.
function reducer(state = 체중, action){
switch (action.type) {
case '증가':
return state + 1
case '감소':
return state - 1
default:
return state
}
}컴포넌트에서 state 수정 요청하는 법
: dispatch 사용
const dispatch = useDispatch();
...
return (
<button onClick={()=>{ dispatch({type: '증가'}) }}>더하기</button>
)클릭마다 1씩 증가하게 된다.
Vuex랑 같은 개념으로 생각하면 된다 !
공식문서
