장바구니페이지 만들기

라우터 쓰면 되는 것 아니겠습니까 그래서 App.js의 쓰던 곳을 찾아가봅시다.

<Route path="/cart" element={ <Cart/> } /> 

를 추가해줌 /cart로 접속하면 Cart컴포넌트 보여주기로했슴.

 
 cart.js
 
 <Table>
<thead>
 <tr>
   <th>#</th>
   <th>상품명</th>
   <th>수량</th>
   <th>변경하기</th>
 </tr>
</thead>
<tbody>
 <tr>
   <td>1</td>
   <td>안녕</td>
   <td>안녕</td>
   <td>안녕</td>
 </tr>
</tbody>
</Table> 
 
 

표완성 Cart컴포넌트에 넣어줌.
bootstrap꺼라 상단에서 import {Table} 'react-bootstrap해줘야 함.

Redux 쓰면 뭐가 좋냐면

말그대로 props가 없어도 state를 공유할수있게 해주는 라이브러리

![](https://velog.velcdn.com/images/qwa1822/post/5d572a17-04fc-4742-be3c-0ca6cd0991f0/image.png)

이걸설치하면 js파일하나에 state들을 보관할수있음.
그걸 모든컴포넌트가 꺼내쓸수있다.
그래서 귀찮게 props전송을 안해줘도됨
컴포넌트가 많아질수록 좋음.

Redux 설치는

>	npm install @reduxjs/toolkit react-redux


package.json react 18.1이상이면
가능함.


## Redux 셋팅은 

    import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 
    
    ```
    store.js파일을 만들어서 위으코드를 복붙
  
    
    
    ```jsx
    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>
); 

    
    
    ```
    2. index.js 파일가서 Provider라는 컴포넌트와 아까 작성한 파일을 import해옴.
    
    
    ```jsx
    
    store.js
import { configureStore, createSlice } from "@reduxjs/toolkit";

createSlice({
  name:'state이름~~',
  initialState:'값'
});

export default configureStore({
  reducer: {},
});


    
    
    ```
    
    
    
    
let user = createSlice({
  name: "user",
  initialState: "kim",
});

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

    
    
    useSelector()<< store에 등록한거 갖고와