[1. ajax 사용법]
1.
React에서 ajax를 사용하기 위해서는 라이브러리가 필요하다! yarn add axios, npm add axios
2.
get요청방벙
a.
get(url).then(성공시).catch(실패시)
b.
then((가져온자료)=> {}),catch(() => {})사이에 콜백함수를 이용해 코드를 작성 할 수 있다.
c.
axios를 쓰시면 JSON을 Object형식으로 자동적으로 바꿔준다
3.
POST 요청
a.
axios.post('서버URL',{ id : 'coddingapple', pw : 1234}).then()
/* eslint-disable */
import React ,{useContext, useState} from 'react';
import {Navbar, Container,Nav, NavDropdown, Button } from 'react-bootstrap';
import './App.css';
import Data from './data.js';
import axios from 'axios';
//라우터 임포트
import {Link, Route, Switch} from 'react-router-dom';
import Detail from './Detail.js';
/* 만약 export한 data가 여러개라면
ex) var name = 'KIM';
var name2 = 'PARK';
import { name, name2 } from './data.js'; 이런식으로 다 써줘야됨
*/
/*
ㅁ ContextApi만들기
1. React.createContext(); --> 범위를 생성해주는 문법(여기서 범위란? 같은 변수값을 공유할 범위다)
2. 같은 값을 공유할 HTML을 범위로 싸매기
3. <범위.Provider>로 감싸고 value={공유 원하는 값} => <범위.Provider value={공유 원하는 값}> </범위.Provider>
4. 원하는 컴포넌트로가 let 재고 = useContext(범위이름)으로 공유하기 ex) let 재고 = useContext(재고Context);
5. 값을 다른 컴폰너트에 쓰고싶다면 export를 이용하자 => ex) export let 재고Context = React.createContext();
*/
export let 재고Context = React.createContext();
function App() {
//연습용 데이터가 너무 기니깐 다른파일로 잘라내어 state로 저장하고 데이터바인딩을 해보자
let [shoes, shoes변경] = useState(Data);
//상품 재고 표시
let [재고,재고변경] = useState([10,11,12])
return (
<div className="App">
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
{
/*
페이지 이동버튼 만들기
1. 일단 Navbar안의 href를 지우고 <Link to="경로">버튼</Link>
*/
}
<Nav.Link as={Link} to="/">Home</Nav.Link>
<Nav.Link as={Link} to="/detail">Detail</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item>Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<Switch>
<Route exact path="/">
<div className="background"> {/* src안에있는 파일은 경로를 무조건 ./부터 */}
<Container>
<h1>20% Season OFF</h1>
<p>
This site offer a biggest sale product in the Korea.
We hope you to enjoy here
</p>
<p>
<Button variant="primary">Learn more</Button>
</p>
</Container>
</div>
{/* 가로로 3분할 */}
<div className="container">
<재고Context.Provider value={재고}>
<div className="row">
{
shoes.map(function(a, i){
return (
<Card shoes={shoes[i]} i = {i} key={i}/>
)
})
}
</div>
</재고Context.Provider>
{
/* ajax 사용하기
1. react는 axios를 이용 -> 사용하려면 libray 설치 yarn add axios
2. get요청방법(url).then(성공시).catch(실패시)
- axios.get(url).then().catch()
- then((가져온자료)=> {}),catch(() => {})사이에 콜백함수를 이용해 코드를 작성 할 수 있다.
- axios를 쓰시면 JSON을 Object형식으로 자동적으로 바꿔준다
3.POST 요청
- axios.post('서버URL',{ id : 'coddingapple', pw : 1234}).then()
*/
}
<button className="btn btn-primary" onClick={() => {
//POST
// axios.post('서버URL',{ id : 'coddingapple', pw : 1234}).then()
//로딩중이라는 UI띄움
//axios.get(데이터요청URL)
axios.get('https://codingapple1.github.io/shop/data2.json')
.then((result) => {
//로딩중이라는 UI 안보이게하기
console.log('suceess');
console.log(result.data);
shoes변경([...shoes, ...result.data])
})
.catch(() => {
console.log('failure');
})
}}>더보기</button>
</div>
</Route>
<Route exact path="/detail/:id">
<재고Context.Provider value={재고}>
{/*
URL에 파라밑터 문법, 콜론뒤에 맘대로 작명, 여러개 사용가능 ex ) detail/:id/:id2
*/}
<Detail shoes = {shoes} 재고={재고} 재고변경={재고변경}/>
</재고Context.Provider>
</Route>
<Route path="/:id">
<div>아무거나 적었을 때 이거보여주세요</div>
</Route>
</Switch>
</div>
);
}
/*
Router를 하기위해서는 따로 설치가 필요하다
1. yarn add react-router-dom@5 or npm install react-router-dom@5 (주의 : @5를 붙여야한다 )
2. index.js 들어가서 설정해주자 (import해주기)
-.라우터 셋팅(라이브러리 이름) import { BrowserRouter } from 'react-router-dom';
-.ReactDOM.render에서 아래처럼 써주자
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
3. App.js에서 router를 쓸수있게 import설정해주기
-import {Link, Route, Switch} from 'react-router-dom';
*/
function Card(props) {
let 재고 = useContext(재고Context);
return(
<div className="col-md-4">
<img src={"https://codingapple1.github.io/shop/shoes"+(props.i + 1)+".jpg"} width="100%" />
<h4>{props.shoes.title}</h4>
<p>{props.shoes.content} & {props.shoes.price}</p>
{재고[props.i]}
<Test></Test>
</div>
)
}
function Test() {
let 재고 = useContext(재고Context);
return(
<p>재고 : {재고}</p>
)
}
export default App;
JavaScript
복사
