React 로 게시판을 만들어보는 가장 마지막 단계로 상세페이지를 만들어보고 마무리를 하도록 하겠습니다.
상세페이지 기능
게시판 상세 페이지에 있는 기능으로는 다음과 같습니다.
- 상세정보 조회
- 정보 수정
- 삭제
페이지 구성
상세정보 조회와 정보 수정을 나눠서 구현하도록 하겠습니다.
상세정보조회
Detail.js 를 만들어서 필요한 사항을 import 해줍니다.
import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from "react-router-dom";
import TestService from 'service/TestService'목록에서 전달되는 파라미터를 받아서 상세데이터를 가져오는 Service를 호출하여 데이터를 화면에 보여주는 작업을 합니다.
const params = useParams();
const navigate = useNavigate();
const [getUser, setUser] = useState({});
const {userId, email, userName, hpNo} = getUser;
const getUserDetail = () => {
let reqVO = {
userId: params.userId
};
TestService.getUserDetail(reqVO).then((res) => {
setUser(res.data)
});
}
useEffect(() => {
getUserDetail();
}, []);
return (
<div>
<div>
<h2>{userId}</h2>
<h5>{email}</h5>
<h5>{userName}</h5>
<h5>{hpNo}</h5>
</div>
</div>
);간단히 설명을 하자면 사용자 id를 받아서 미리 만들어둔 서버연동 TestService의 UserDetail 을 호출하여 정보를 받아와서 화면에 보여주는 기능을 합니다.
상세 화면에서 제공하는 기능으로 수정, 삭제, 목록 버튼을 추가하여 각각의 이벤트도 처리해줍니다.
const UpdateUser = () => {
navigate('/UserUpdate/' + params.userId);
}
const DeleteUser = () => {
if(window.confirm('삭제하시겠습니까?'))
{
let reqVO = {
userId: params.userId
};
TestService.deleteUser(reqVO).then((res) => {
if(res.data)
{
alert('삭제되었습니다.');
navigate('/UserList');
}
else
{
alert('삭제실패');
}
});
}
}
const Cancel = () => {
navigate("/UserList")
}
return (
<div>
<div>
<h2>{userId}</h2>
<h5>{email}</h5>
<h5>{userName}</h5>
<h5>{hpNo}</h5>
</div>
<div>
<button onClick={UpdateUser}>수정</button>
<button onClick={DeleteUser}>삭제</button>
<button onClick={Cancel}>목록</button>
</div>
</div>
);수정버튼을 누르면 수정화면으로 userId를 전달하면서 화면 전환을 하도록 하였고, 삭제버튼을 누르면 사용자 삭제 API를 호출하도록 하였습니다.
정보수정
정보수정 화면은 등록화면과 유사하게 구성하면 되고 insert 대신 update 기능으로 동작하면 되고 기본 Key값이 되는 userId는 수정을 하지 못하도록 readonly 로 처리 해주면 되겠습니다.
먼저 필요한 기능을 import합니다.
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import TestService from 'service/TestService'상세 화면과 마찬가지로 상세정보조회를 먼저 해서 각각의 TextBox에 셋팅이 되도록 하고 이를 변경할 때마다 onChange이벤트를 발생시켜서 name, value 값을 읽어서 임시 저장해줍니다.
const params = useParams();
const navigate = useNavigate();
const [getUser, setUser] = useState({
userId: '',
email: '',
userName: '',
hpNo: ''
});
const {userId, email, userName, hpNo} = getUser;
const onChange = (event) => {
const { name, value } = event.target;
setUser({
...getUser, [name]:value
});
}
const getUserDetail = () => {
let reqVO = {
userId: params.userId
};
TestService.getUserDetail(reqVO).then((res) => {
setUser(res.data)
});
}
useEffect(() => {
getUserDetail();
}, []);
const Save = () => {
TestService.updateUser(getUser).then((res) => {
if(res.data)
{
alert('수정되었습니다.');
navigate('/UserDetail/' + userId);
}
else
{
alert('수정실패');
}
});
}
const Cancel = () => {
navigate('/UserDetail/' + userId);
}
return (
<div>
<div>
<span>userId</span>
<input type="text" name="userId" value={userId} readOnly={true} />
</div>
<div>
<span>email</span>
<input type="text" name="email" value={email} onChange={onChange} />
</div>
<div>
<span>userName</span>
<input type="text" name="userName" value={userName} onChange={onChange} />
</div>
<div>
<span>hpNo</span>
<input type="text" name="hpNo" value={hpNo} onChange={onChange} />
</div>
<button onClick={Save}>수정</button>
<button onClick={Cancel}>취소</button>
</div>
)수정버튼을 누르면 입력된 Text박스의 값이 임시저장된 정보인 getUser 를 수정 API로 전달하여 정보가 수정되도록 구현하였습니다.
마치며
React 게시판을 구현하는 가장 마지막 단계를 포스팅 하고 마무리를 하도록 하겠습니다.
User목록, 등록, 상세로 구성하였고 앞서 작성된 글들을 참고하시면 설치부터 구현, 테스트 까지 할 수 있겠습니다.
같이 보면 좋은 글