/cart로 접속하면 장바구니 페이지를 보여줍시다.
근데 장바구니 기능은 Redux를 이용해서 만들어봅시다.
장바구니 페이지 만들기
페이지 하나 필요하면 라우터를 사용하면됩니다.
<Route path="/cart" element={ <Cart/> } />
<Route>를 하나 추가했습니다. 누가 /cart로 접속하면 <Cart>컴포넌트를 보여주기로 했습니다.
Cart.js를 만들어서 Cart 컴포넌트를 만들어줍니다.
장바구니 페이지에서 사용할 Table 레이아웃
아래의 코드를 사용하면 표가 생성됩니다. (React-bootstrap)에서 가져왔습니다.
상단에서 import 해줍니다.
<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>
Redux를 쓰면
Redux는 props없이 state를 공유할 수 있게 도와주는 라이브러리 입니다.

js파일 하나에 state를 보관할 수 있는데 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있습니다.
그래서 귀찮은 props전송이 필요없어집니다. 컴포넌트가 많을수록 좋을거 같습니다.
Redux 설치는 npm install @reduxjs/toolkit react-redux를 터미널에 입력합니다.
그리고 react 버전이 18.1.x 이상이면 사용가능합니다.
Reudx 셋팅
1. 아무데나 store.js 파일을 만들어서 아래의 코드를 복붙해줍니다.
저는 src폴더안에 만들었습니다. 이게 뭐나면 아까 말했던 state들을 보관하는 파일입니다.
import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
reducer: { }
})
2. index.js 파일가서 Provider라는 컴포넌트와 아까 작성한 파일을 import해옵니다.
그리고 밑에 <Provider store={import해온거}> 이걸로 <App/>을 감싸면 됩니다.
그럼이제 <App>과 그 모든 자식컴포넌트들은 store.js에 있던 state를 맘대로 꺼내쓸 수 있습니다.
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>
);
'프론트엔드 > react' 카테고리의 다른 글
React - Redux(3) Redux의 state변경하는법 (0) | 2023.08.05 |
---|---|
React - Redux(2) store에 state 보관하고 쓰는 법 (0) | 2023.08.04 |
React - Context API (0) | 2023.08.04 |
React - 컴포넌트 전환 애니메이션 주는 법 (0) | 2023.08.04 |
React - 리액트에서 탭 UI 만들기 (0) | 2023.08.04 |
/cart로 접속하면 장바구니 페이지를 보여줍시다.
근데 장바구니 기능은 Redux를 이용해서 만들어봅시다.
장바구니 페이지 만들기
페이지 하나 필요하면 라우터를 사용하면됩니다.
<Route path="/cart" element={ <Cart/> } />
<Route>를 하나 추가했습니다. 누가 /cart로 접속하면 <Cart>컴포넌트를 보여주기로 했습니다.
Cart.js를 만들어서 Cart 컴포넌트를 만들어줍니다.
장바구니 페이지에서 사용할 Table 레이아웃
아래의 코드를 사용하면 표가 생성됩니다. (React-bootstrap)에서 가져왔습니다.
상단에서 import 해줍니다.
<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>
Redux를 쓰면
Redux는 props없이 state를 공유할 수 있게 도와주는 라이브러리 입니다.

js파일 하나에 state를 보관할 수 있는데 그걸 모든 컴포넌트가 직접 꺼내쓸 수 있습니다.
그래서 귀찮은 props전송이 필요없어집니다. 컴포넌트가 많을수록 좋을거 같습니다.
Redux 설치는 npm install @reduxjs/toolkit react-redux를 터미널에 입력합니다.
그리고 react 버전이 18.1.x 이상이면 사용가능합니다.
Reudx 셋팅
1. 아무데나 store.js 파일을 만들어서 아래의 코드를 복붙해줍니다.
저는 src폴더안에 만들었습니다. 이게 뭐나면 아까 말했던 state들을 보관하는 파일입니다.
import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
reducer: { }
})
2. index.js 파일가서 Provider라는 컴포넌트와 아까 작성한 파일을 import해옵니다.
그리고 밑에 <Provider store={import해온거}> 이걸로 <App/>을 감싸면 됩니다.
그럼이제 <App>과 그 모든 자식컴포넌트들은 store.js에 있던 state를 맘대로 꺼내쓸 수 있습니다.
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>
);
'프론트엔드 > react' 카테고리의 다른 글
React - Redux(3) Redux의 state변경하는법 (0) | 2023.08.05 |
---|---|
React - Redux(2) store에 state 보관하고 쓰는 법 (0) | 2023.08.04 |
React - Context API (0) | 2023.08.04 |
React - 컴포넌트 전환 애니메이션 주는 법 (0) | 2023.08.04 |
React - 리액트에서 탭 UI 만들기 (0) | 2023.08.04 |