React shop pj 230922

Context API

props를 여러개 써줘야 하는 상황이 번거롭기 때문에 사용하는 API

셋팅

1. createContext()
   -Context는 state보관함이라고 생각하기

2. < Context >로 원하는 컴포넌트 감싸기

3. value = {{state1, state2 ...}}

• 공유원하는 state들을 value에 넣어주기

-< Context > 로 감싸진 태그안의 모든 컴포넌트는 재고, place 사용가능

state 사용법

1. Context를 import 하기

*** import 해주기 전에 export 되어있는지 확인하기

2. state 사용은 useContext(Context1)

• 보관함 해체해주면 {state1, state2 ... } 이런식으로 state들이 object형태로 남음

• state들을 쉽게 꺼내 쓰고 싶으면 distruct 문법 사용해주기
• {} 안에 쓰고 싶은 state 써주기

3. 사용하고싶은 html 위치에 {재고} 이런식으로 state 가져다가 써주기
   --> props 안써도 App에 있던 state 잘나옴

==> 어려우면 props쓰면 됨
여러개의 컴포넌트가 중첩이 되어있는 경우 사용하면 좋을듯

---

Context API 특징
1. state 변경시, 쓸데없는 것까지 재랜더링 --> 성능 이슈 발생 가능
2. 나중에 컴포넌트 재사용이 어려움 (다른 페이지에서 사용하려고 하면 난감해지는 경우 많음)

*** Context API 대신 외부 라이브러리를 더 많이 사용함 (EX> Redux)

---

장바구니 페이지 만들기

테이블 태그 설명

• < tr > : 가로줄 생성
• < th >, < td > : 열 생성

장바구니 state가 App, Detail, Cart에 필요하면 어디 만들어야할까?

--> 원래는 가장 상위폴더인 APP에 만들어야 하지만,
다 props 주면 번거로우니까 Redux를 사용하자!

• Redux 사용하면 컴포넌트들이 props 없이 state 공유 가능

Redux 설치방법

터미널에 npm install @reduxsjs/toolkit react-redux 입력

Redux 세팅 방법

1. src안에 store.js 파일 생성 & 아래 코드 복붙

 import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

2. index.js가서 < Provider store={store} > 쓰기

Redux store에 state 보관하는 법

• store.js에 createSlice({}) 만들어주기
  ==> useState() 역할

==> 모든 컴포넌트들이 user라는 컴포넌트를 가져다 사용 할 수 있음!

Redux store의 state 꺼내는 법

• state 사용할 js 파일로 가서 useSelector import해주고
  위와 같은 방법으로 사용해주기

let a = useSelector((state)=>{return state})

• Redux store에 있는 state 남음

새로운 redux slice 만드는 법

1. 기존 slice 아래에 똑같은 형식으로 만들어주기

2. 맨 아래에 꼭 등록해주기 !

---

사용하려는 곳에 console로 찍어보면

이렇게 뜸

useSelector 편하게 쓰기위한 팁

1. 원하는 state만 사용하는 법

let a = useSelector((state)=>{return state})

• 위 코드에서 state는 store 안에 있던 모든 state 의미
  따라서, 원하는 state만 사용하고 싶다면

let a = useSelector((state)=>{return state.stock})
console.log(a)

이런식으로 return state.원하는slice명 으로 사용해도 됨

2. 중괄호랑 return은 동시에 생략 가능

let a = useSelector((state)=>{return state.stock})

let a = useSelector((state)=> state.stock )

// 위 아래는 같은 코드

Redux 쓰면 편한데 왜 props 쓰는지?

• 간단한 프로젝트는 props 전송이 코드가 훨씬 짧음

주의사항

• 컴포넌트간 공유가 필요없다면 그냥 useState() 쓰기
• Redux store 안에 모든 것을 넣지 말자