리덕스란, 전역 상태관리 패키지 라이브러리 이다.
즉, 중앙 State관리소를 사용할수있도록 도와주는 라이브러리 다.
👀 Redux를 사용하는 이유 ?
먼저 React를 웹 개발 할때 index.html을 두고 그안에 component( 함수 형태의 html덩어리) 를 여러개두면서 만들게 된다. 그리고 이때 state(변수라 생각하면 됨)를 만들게 되는데 이 state를 다른 component에서 함부로 사용할수가 없다.
state는 다른 component 에서 사용하고 자 할때 props통해 전송함으로 사용하게되는 이때!!!!
만약 component가 100개 이상 중첩되어있다 가정한다면..? 에바참치꽁치👽 ;;
이럴때 !! 바로 이 Redux를 사용하는것이다.
한마디로, Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리다.
Redux를 설치해서 사용하는 state를 js파일 하나에 보관함으로 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있수가 있다는것이다.
👀 리덕스 설치
1. 설치
npm install @reduxjs/toolkit@1.8.1 react-redux 설치하기 전에 package.json 파일을 열어서
"react" > "react-dom" 항목의 버전을 확인해야하며 이 두개가 18.1.~ 이상이면 사용가능하다.
2. store 설정
리덕스를 사용하면 상태값을 컴포넌트에 종속시키지 않고, 상태관리를 컴포넌트 바깥에서 관리할수있도록 하게된다. store.js 파일을 만들고 아래와 같은 코드를 작성한다. 이 파일이 state들을 보관하는 파일이다.
import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
reducer: {
}
}) 3. index.js에서 컴포넌트 provider로 App감싸기
Provider 컴포넌트로 App 을 감싸고 store.js 파일을 import해온 후
Provider에 store 속성을 집어넣어준다.
이제 store.js에 있던 state를 전부 사용이 가능하다.
import { Provider } from "react-redux";
import store from './store.js'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
</React.StrictMode>
); 4. store.js 파일에서 state를 만들어보자.
모든 컴포넌트에서 이제는 이 안에서 state를 빼서 사용이 가능하게 된다.
export 할때,
작명 : user.reducer
마지막에 reducer를 꼭 붙여야하는것이 공식이다.
ex) user : user.reducer (귀찮으니 작명도 state와 같은 이름을 했다.)5. 작성한 state를 다른 페이지에서 작성 시
createSlice 는 useState와 비슷한 용도
name: state 명 작성
initialState: 실제 state값 작성이전과 다른점은 함수 내에서 작명을 해야한다는것과 slice라고 부른다는점이다.
5-1 연습문제
{ id: 0, name: "HAIR", count: 2, price: "44000" },
{ id: 2, name: "BODY", count: 1, price: "32000" },위는 장바구니에 추가한 상품들이다.
이것을 redux.store안에 보관하고 Cart페이지에서 데이터 바인딩을 해보자.
store.js
let cart = createSlice({
name: "cart",
initialState: [
{ id: 0, name: "HAIR", count: 2, price: "44000" },
{ id: 2, name: "BODY", count: 1, price: "32000" },
],
});
export default configureStore({
reducer: {
cart: cart.reducer
},
});
Cart.js
let list = useSelector((state) => state);
console.log(list.cart);
console.log(list.cart[0]);
console.log(list.cart[0].name);
먼저 콘솔통해 확인해보았다.
<tbody>
<tr>
<td>{list.cart[0].id}</td>
<td>{list.cart[0].name}</td>
<td>{list.cart[0].count}</td>
<td>{list.cart[0].price}</td>
</tr>
<tr >
<td>{list.cart[1].id}</td>
<td>{list.cart[1].name}</td>
<td>{list.cart[1].count}</td>
<td>{list.cart[1].price}</td>
</tr>
</tbody>
결과는 아래의 이미지 같다.
이때 카트리스트에 물건이 100개 이상이 담겼을것을 가정하여 이전에 배웠던 map함수를 통해서 더욱 클린한 코딩을해보았다.
Cart.js
import { Table } from "react-bootstrap";
import { useSelector } from "react-redux";
function Cart() {
let list = useSelector((state) => state);
console.log(list.cart);
console.log(list.cart[0]);
console.log(list.cart[0].name);
return (
<div>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Count</th>
<th>Price</th>
</tr>
</thead>
<tbody>
{list.cart.map((a, i) => (
<tr key={i}>
<td>{list.cart[i].id}</td>
<td>{list.cart[i].name}</td>
<td>{list.cart[i].count}</td>
<td>{list.cart[i].price}</td>
</tr>
))}
</tbody>
</Table>
</div>
);
}
export default Cart;
