부트스트랩 table component 검색 https://react-bootstrap.netlify.app/components/table/#tables React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 더보기 # {Array.from({ length: 4 }).map((_, index) => ( Table heading ))} 1 {Array.from({ length: 4 }).map((_, index) => ( Table cell {index} ))} App.js 더보기 import './App.css'; import { Navbar, NavDropdown, Nav, Cont..

리덕스 및 리액트-리덕스 라이브러리 추가 yarn add redux react-redux index.js 더보기 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; import { combineReducers, createStore } from 'redux'; import { Provider } from 'react-redux'; let reducer1State = []; export con..

상품 상세페이지(Detail.js)에 부트스트랩 TABS 컴포넌트 삽입 https://react-bootstrap.netlify.app/components/navs/#tabs React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io Active Option 2 Disabled CSSTranstition 라이브러리 추가 yarn add react-transition-group http://reactcommunity.org/react-transition-group/css-transition React Transition Group The animation classNames applied ..

상세페이지 브라우저 라우팅 App.js 더보기 import './App.css'; import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap'; import Shoes1 from './api/shoes1.json'; import { useState } from 'react'; import axios from 'axios'; import { Route, Switch } from 'react-router-dom'; import Detail from './Detail'; import { useHistory } from 'react-router-dom'; function App() { let [ shoes, setShoes ] = useState(..

브라우저 라우터 라이브러리 추가 yarn add react-router-dom@5 index.js 더보기 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // ..

더보기 버튼 구성 및 기능구현 axios 라이브러리로 api 호출하여 데이터를 사용한다. 더보기 버튼을 누를 때마다 추가로 데이터들을 누적하여 표시한다. api호출 시 사용 json https://ksky216.github.io/json/data1.json api 호출 Axios 라이브러리 추가 yarn add axios App.js 더보기 import logo from './logo.svg'; import './App.css'; import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap'; import Shoes1 from './api/shoes1.json'; import { useState } from 'react'; import axi..