props없이 데이터 전달하기

💻오늘 배운 내용

👩🏼‍💻 step1_ 초기세팅

index.js

1) configureStore import

2) configureStore에 변수 담기

3)provider import 하기

4) 최상위 태그를 Provider 감싸기

index.js

초기 데이터 넣기

creatSlice import , 변수에 담기

import { configureStore, createSlice} from "@reduxjs/toolkit";
let products = createSlice({  })

ex)
let product = createSlice ({
   name : "product",
   initialState : [ 객체 형태로 담긴다 ]
})

store에 넣기

reducer :{
상품들(1) : 상품들(2).reducer}

상품들(1)은 내가 임의로 정하는 이름, 뒤의 상품들(2)는 createSlicer와 동일한 이름을 넣어줘야 한다.

🧋 완성된 초기세팅 - index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
//1 import
import { configureStore} from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import { createSlice } from '@reduxjs/toolkit';

let 상품들 = createSlice({
 name:"상품들",
 initialState:[
   { id: 1, 
     name: "👖멋진 바지🩳", 
     price: 20000, 
     to:"/1", 
     likes:100, 
     size:[28,30,32]},
   { id: 2, 
     name: "👚멋진 셔츠👔", 
     price: 10000, to:"/2", 
     likes:200, 
     size:['small','medium','large']},
   { id: 3, 
     name: "👞멋진 신발👠", 
     price: 30000, 
     to:"/3", 
     likes:300, 
     size:[230,240,250,260,270]},
 ],
})
const store = configureStore({
 reducer:{
   상품들: 상품들.reducer
 },
});
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
   <Provider store={store}>
   <BrowserRouter>
       <App />
   </BrowserRouter>
   </Provider>
 </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

👩🏼‍💻 step2_데이터 가져와서 실제 화면에 보여주기

데이터 가저올 화면 ( App.jsx)

useSelector import,
const product( 내가 지정하는이름) = useSelector (( state )=>state.상품들)

여기서 상품들은 위의 상품들(1)과 동일하게 해줘야 한다 .
★ useSelector (( state )=>state.상품들) 중괄호가 없어야함
Expected an assignment or function call and instead saw an expression no-unused-expressions 오류뜬다

index.js에서 App.jsx로 데이터를 전달 하는것이 완성 되었음!

Main.jsx 등 props가 활용되고 있는 곳에서 변경 하면 된다

데이터를 변경 1 - 데이터 전달이 필요 없을 때

적용 예시 ) 상품을 가격 순으로 변경하기 ( 데이터 전달이 필요없음 )

1)createSlice 파라미터 안에 reducers를 추가한다.
2)reducers 안에 변경함수를 만든다.
3) export 하기

index.js

함수를 사용할 파일로 이동 ( products.jsx)

import { useDispatch} from "react-redux";

onclick 으로 함수 실행 ( import 잊지 말기! -import { sortByPrice } from ".."; )

## 데이터 변경 2 - 데이터 전달이 필요할 때 (예시- 장바구니에 상품 넣기 )

1. createSlice 를 통해서 redux를 만들어줌'

2. reducer에 장바구니 추가

3. 장바구니를 구현할 페이지에 useSelector 넣기
   (const cart = useSelector((state)=>state.장바구니))로 변수 지정해줘야함

(생략)
<button onClick={() => {
	dispatch(장바구니추가(foundData));
}}>
장바구니 추가하기
</button>

( const foundData = products.find((item)=>{
return item.id === parseInt(params.id);
}) )

🐥