[React]리액트 공부 - 쇼핑몰2

2022 코딩애플 리액트 강의

📂Redux

1. store.js 파일 생성 & 코드 복붙
2. index.js 가서 <Provider stor{store}> 쓰기
3. 여러 js에서 사용하기

store.js

import {configureStore} from '@reduxjs/toolkit'

let user = createSlice({ //슬라이스라고 부름
  name : 'user'
  initialState : 'jinsil'
})

let stock = createSlice({
  name : 'stock'
  initialState : [10, 11, 12]
})

export default configureStore({
  reducer:{
    user : user.reducer,
    stock : stock.reducer
  }
})

index.js

import { Provider } from "react-redux";
import store from "./store.js";

root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

Cart.js

import { useSelector } from "react-redux";

function Cart() {
  let a = useSelector((state) => {
    return state.user;
  }); //store.js에 있는 user 슬라이스 가져옴

  return <div></div>;
}

쓰는 이유 : 컴포넌트간 state 공유 편해짐

---

📂Redux의 state 변경

1. state 수정해주는 함수 만들기
2. 원할 때 그 함수 실행해달라고 store.js에 요청
3. 만든 함수 import 해서 사용

store.js

import {configureStore} from '@reduxjs/toolkit'

let user = createSlice({
  name : 'user'
  initialState : [
    {name : 'jinsil', age : 20},
    {name : 'park', age : 30},
  ], //변수 하나여도 object 안에 넣는게 편함
  reducers : {
    changeName(state){ //기존 state
      state.name = 'park'
    }
    increase(state, a){
      let number = state.findIndex((a)=>{return a.id === action.payload})
      state.age += a.payloade
    }
  }
})

export let {changeName, increase} = user.actions //actions : state 변경 함수들

Cart.js

import { useSelector, useDispatch } from "react-redux";
import { changeName } from "./../store"; //import 해옴

function Cart() {
  let state = useSelector((state) => state);
  let dispatch = useDispatch(); //store.js로 요청 보내주는 함수

  return (
    <div>
      <button
        onClick={() => {
          dispatch(changeName());
        }}
      >
        버튼
      </button>
      <button
        onClick={() => {
          dispatch(increase(100));
        }}
      >
        +
      </button>
    </div>
  );
}

---

📂localStorage

1. 입력

localStorage.setItem(‘age’, ‘20’)

2. 출력

localStorage.getItem(‘age’) → ‘20’ 출력됨

3. 삭제

localStorage.removeItem(‘age’)

4. array/object 저장 : JSON으로 바꾸기

function App() {
  //입력
  let obj = { name: "kim" };
  localStorage.setItem("data", JSON.stringify(obj));

  //출력
  let result = localStorage.getItem("data");
  JSON.parse(result); //object로 변환
}

5. 최근 본 상품 만들기

• 누가 Detail 페이지 접속하면 (useEffect)
• 그 페이지에 보이는 상품 ID 가져와서 (찾은상품.id)
• localStorage의 watched 항목에 추가 (getItem, 변경, setItem)

function Detail(props) {
  let { id } = useParams();
  let 찾은상품 = props.shoes.find((x) => x.id == id);
  let [alert, setAlert] = useState(true);
  let [tab, setTab] = useState(0);
  let dispatch = useDispatch();

  useEffect(() => {
    let result = localStorage.getItem("watched");
    result = JSON.parse(result);
    result.push(찾은상품.id);
    localStorage.setItem("watched", JSON.stringify(result));
  }, []);
}

---

📂react-query

1. 터미널에 ‘npm install react-query’ 입력

2. index.js 셋팅

• import {QueryClient, QueryClientProvider} from “react-query”;
• const queryClient = new QueryClient()
• <QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>

3. 문법

let result = useQuery("작명", () =>
  axios.get("링크").then((a) => {
    return a.data;
  })
);

4. 장점

• 성공/실패/로딩 중 쉽게 파악 가능
  {result.isLoding ? ‘로딩중’ : result.data.name}

• 자동으로 refetch 해줌 {stateTime : 2000}

• 실패 시 retry 알아서 해줌

• state 공유 안 해도 됨

• ajsx 결과 캐싱 기능