http://192.168.0.99:8080/
Detail.js
import React from "react";
import { Button } from "react-bootstrap";
import { Link } from "react-router-dom";
const Detail = (props) => {
function fetchDelete(postId) {}
return (
<div>
<Link to={"/updateForm/1"} className="btn btn-warning">
수정
</Link>
<Button className="btn btn-danger" onClick={() => fetchDelete(1)}>
삭제
</Button>
<br />
<br />
<h1>제목1</h1>
<hr />
<div>내용1</div>
</div>
);
};
export default Detail;
Java
복사
http://192.168.0.99:8080/api/boards/1/detail
Java
복사
userEffect
Detail, 통신해서 데이터를 받을 그릇
id를 받아오는 방법
만약 postId라고 되어있으면, const로 명시를 해줘야 된다.
그래서 useEffect로 값이 넘어오는 지부터 확인
axios (통신)
이렇게 사용하면 되는데, postId를 바인딩할려면
백틱으로 묶어서 ${}사용하면 된다.
await가 걸리면 멈추기 때문에, 비동기적으로 처리할려면 async를 달아주면 된다.
데이터는 이렇게 responseBody를 가져오면 되고,
setPost로 상태를 변경
데이터 바인딩 하는 거
import axios from "axios";
import React, { useEffect, useState } from "react";
import { Button } from "react-bootstrap";
import { Link, useParams } from "react-router-dom";
const Detail = (props) => {
const { id } = useParams();
const [post, setPost] = useState({
id: undefined,
title: "",
content: "",
userId: undefined,
username: "",
owner: false,
replies: [],
});
useEffect(() => {
console.log("postId", id);
fetchDetail(id);
}, []);
async function fetchDetail(postId) {
let response = await axios({
url: `http://localhost:8080/api/boards/${postId}/detail`,
});
let responseBody = response.data;
setPost(responseBody.body);
}
function fetchDelete(postId) {}
return (
<div>
<Link to={"/updateForm/1"} className="btn btn-warning">
수정
</Link>
<Button className="btn btn-danger" onClick={() => fetchDelete(post.id)}>
삭제
</Button>
<br />
<br />
<h1>{post.title}</h1>
<hr />
<div>{post.content}</div>
</div>
);
};
export default Detail;
Java
복사
import React, { useState } from "react";
import { Button, Form } from "react-bootstrap";
const JoinForm = (props) => {
const [user, setUser] = useState({
username: "",
password: "",
email: "",
});
return (
<Form>
<Form.Group>
<Form.Label>Username</Form.Label>
<Form.Control
type="text"
placeholder="Enter username"
name="username"
onChange={""}
/>
</Form.Group>
<Form.Group>
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Enter password"
name="password"
onChange={""}
/>
</Form.Group>
<Form.Group>
<Form.Label>Email</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
name="email"
onChange={""}
/>
</Form.Group>
<Button variant="primary" type="submit" onClick={""}>
회원가입
</Button>
</Form>
);
};
export default JoinForm;
Java
복사
onChange이벤트를 필드명이 매칭되서 입력이 되게
그럼 각 필드명에 onChange로 값이 들어가게 된다.
submitJoin을 버튼의 함수 연결한다.
일단 새로고침 막는거 적어주고, 통신코드 짜기
가입이 완료되면 리다이렉트를 하기위해서
navigate를 사용
성공하면 /loginForm 으로
에러 메시지 응답이 어떻게 오는지 확인하고,
response.data.msg 로 바인딩
에러 메시지 얼러트가 뜨게 된다.
axios에 json데이터를 넣어야 되나? 바로 변환해서 사용하나???
data로 object user를 날리면 알아서, json 데이터로 변환해서 전송한다.
import axios from "axios";
import React, { useState } from "react";
import { Button, Form } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
const JoinForm = (props) => {
const navigate = useNavigate();
const [user, setUser] = useState({
username: "",
password: "",
email: "",
});
function changeValue(e) {
setUser({
...user,
[e.target.name]: e.target.value,
});
}
async function submitJoin(e) {
e.preventDefault(); // 새로고침 막기 (action 발동 막기)
let response = await axios({
url:"http://localhost:8080/join",
method: "post",
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
data: user
});
if (response.status === 200) {
navigate("/loginForm");
} else {
alert(response.data.msg);
}
}
return (
<Form>
<Form.Group>
<Form.Label>Username</Form.Label>
<Form.Control
type="text"
placeholder="Enter username"
name="username"
onChange={changeValue}
/>
</Form.Group>
<Form.Group>
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Enter password"
name="password"
onChange={changeValue}
/>
</Form.Group>
<Form.Group>
<Form.Label>Email</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
name="email"
onChange={changeValue}
/>
</Form.Group>
<Button variant="primary" type="submit" onClick={submitJoin}>
회원가입
</Button>
</Form>
);
};
export default JoinForm;
Java
복사
에러가 터지니까 알아보니,
try catch문법으로 에러를 다루어야 된다
찍히는 것을 확인해보니 이렇게 메시지가 들어가서
이렇게 alert를 띄워주면 된다.
import axios from "axios";
import React, { useState } from "react";
import { Button, Form } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
const JoinForm = (props) => {
const navigate = useNavigate();
const [user, setUser] = useState({
username: "",
password: "",
email: "",
});
function changeValue(e) {
setUser({
...user,
[e.target.name]: e.target.value,
});
}
async function submitJoin(e) {
e.preventDefault(); // 새로고침 막기 (action 발동 막기)
// 유효성 검사
try {
await axios({
url: "http://localhost:8080/join",
method: "post",
headers: {
"Content-Type": "application/json; charset=utf-8",
},
data: user,
});
navigate("/loginForm");
} catch (e) {
console.log(e);
alert(e.response.data.msg);
}
}
return (
<Form>
<Form.Group>
<Form.Label>Username</Form.Label>
<Form.Control
type="text"
placeholder="Enter username"
name="username"
onChange={changeValue}
/>
</Form.Group>
<Form.Group>
<Form.Label>Password</Form.Label>
<Form.Control
type="password"
placeholder="Enter password"
name="password"
onChange={changeValue}
/>
</Form.Group>
<Form.Group>
<Form.Label>Email</Form.Label>
<Form.Control
type="email"
placeholder="Enter email"
name="email"
onChange={changeValue}
/>
</Form.Group>
<Button variant="primary" type="submit" onClick={submitJoin}>
회원가입
</Button>
</Form>
);
};
export default JoinForm;
Java
복사