[리액트] Redux 2 : store에 state 보관하고 쓰는 법
뭐 배우기 전에 항상 이걸 왜 쓰는지 생각해보는게 중요합니다.
그래야 나중에 "여기서 Redux 쓰는게 맞나요?" 이런 질문 안하고 알아서 코드 잘짬
Redux 라이브러리 왜 쓴다고 했냐면
state를 Redux store에 보관해둘 수 있는데 모든 컴포넌트가 거기 있던 state를 직접 꺼내쓸 수 있어서
props 없어도 편리하게 state 공유가 가능하다고 했습니다.
오늘은 Redux store에 state 보관하는 법을 알아봅시다.
Redux store에 state 보관하는 법
저번시간에 만들어둔 store.js 파일 열어서 이렇게 코드짜면 state 하나 만들 수 있습니다.
step 1. createSlice( ) 로 state 만들고
step 2. configureStore( ) 안에 등록하면 됩니다.
import { configureStore, createSlice } from '@reduxjs/toolkit'
let user = createSlice({
name : 'user',
initialState : 'kim'
})
export default configureStore({
reducer: {
user : user.reducer
}
}) 1. createSlice( ) 상단에서 import 해온 다음에
{ name : 'state이름', initialState : 'state값' } 이거 넣으면 state 하나 생성가능합니다.
(createSlice( ) 는 useState( ) 와 용도가 비슷하다고 보면 됩니다)
2. state 등록은 configureStore( ) 안에 하ㅇ면 됩니다.
{ 작명 : createSlice만든거.reducer } 이러면 등록 끝입니다.
여기 등록한 state는 모든 컴포넌트가 자유롭게 사용가능합니다.
createSlice만든거는 위에서 변수로 저장한 state임!
state 하나를 slice라고 부릅니다.
Redux store에 있던 state 가져다쓰는 법
(Cart.js)
import { useSelector } from "react-redux"
function Cart(){
let a = useSelector((state) => { return state } )
console.log(a)
return (생략)
}아무 컴포넌트에서 useSelector((state) => { return state } ) 쓰면 store에 있던 모든 state가 그 자리에 남습니다.
변수에 저장해서 진짜로 출력해보십시오.
{ user : 'kim' } 이런거 출력될듯
kim 부분만 출력하고 싶으면 console.log(a.user)
let a = useSelector((state) => state.user ) 이런 식으로 쓰면 좀 더 편리할 수도 있습니다.
내가 원하는 부분만 출력할 수 있음
이렇게 코드 쓰면 모든 component 들이 stock이란 컴포넌트를 사용할 수 있다.
stock 부분만 사용하고 싶으면 a.stock
Redux 편하니까 맨날 쓰면 되겠네요
간단한거 만들 때
컴포넌트가 몇개 없을 때
이럴 땐 그냥 props 쓰는게 더 코드가 짧습니다.
하지만 컴포넌트가 10~20개.. 늘어나면 리덕스 쓰는 게 낫다.
오늘의 숙제 :
하단에 있는 데이터를 Redux store 안에 보관해둡시다.
그리고 Cart.js 페이지에 가져와서 데이터바인딩해봅시다.
데이터 갯수에 맞게 표 생성해달라고 반복문쓰는 것도 좋을듯요
숙제용 장바구니 데이터
[
{id : 0, name : 'White and Black', count : 2},
{id : 2, name : 'Grey Yordan', count : 1}
]▲ 유저가 장바구니에 추가한 데이터라고 생각하고
redux store에 보관해두고 가져다가 써봅시다.
array 자료 안에 object 자료가 2개 들어있을 뿐입니다.
object 자료 안엔 상품 1개의 정보가 들어있군요
import { Table } from "react-bootstrap";
import { useSelector } from "react-redux";
import { useState } from "react";
function Cart() {
let a = useSelector((state) => {
return state.list;
});
console.log(a);
return (
<div>
<Table>
<thead>
<tr>
<th>#</th>
<th>상품명</th>
<th>수량</th>
<th>변경하기</th>
</tr>
</thead>
<tbody>
<tr>
<td>{a[0].id}</td>
<td>{a[0].name}</td>
<td>{a[0].count}</td>
<td>안녕</td>
</tr>
<tr>
<td>{a[1].id}</td>
<td>{a[1].name}</td>
<td>{a[1].count}</td>
<td>안녕</td>
</tr>
</tbody>
</Table>
</div>
);
}
export default Cart;
강의 풀이
store.js에 장바구니 데이터 보관한 다음에
Cart.js 적절한 곳에 꽂아넣어보라고 했습니다.
let cart = createSlice({
name : 'cart',
initialState : [
{id : 0, name : 'White and Black', count : 2},
{id : 2, name : 'Grey Yordan', count : 1}
]
})
export default configureStore({
reducer: {
user : user.reducer,
cart : cart.reducer
}
}) ▲ state 이렇게 만들어두고
<tbody>
{
state.cart.map((a, i)=>
<tr key={i}>
<td>1</td>
<td>{state.cart[i].name}</td>
<td>{state.cart[i].count}</td>
<td>안녕</td>
</tr>
)
}
</tbody> ▲ Cart.js 에선 이렇게 코드짜봤습니다.
let state = useSelector((state)=> state)
당연히 위에서 이렇게 state 부터 가져와야할듯
cart 안에는 큰 array 안에 object 형식으로 두 개가 저장되어있다.
첫째 상품의 제목 검색하려면 위와 같이 코드 작성하면 된다.
import { Table } from "react-bootstrap";
import { useSelector } from "react-redux";
import { useState } from "react";
function Cart() {
let state = useSelector((state) => state);
console.log(state.cart);
return (
<div>
<Table>
<thead>
<tr>
<th>#</th>
<th>상품명</th>
<th>수량</th>
<th>변경하기</th>
</tr>
</thead>
<tbody>
{/*cart 내에 있는 array 자료만큼 반복해라! cart는 [{}, {}] 구조*/}
{state.cart.map((a, i) => (
<tr key={i}>
<td>{a.id}</td>
<td>{a.name}</td>
<td>{a.count}</td>
</tr>
))}
</tbody>
</Table>
</div>
);
}
export default Cart;