리액트, 스프링부트 연동하여 CRUD 구현하기
#4 Add/Edit User Component 생성
지난시간엔 CRUD에서 R(Read, 리스트 불러오기)과 D(Delete, 삭제)를 작성했다면, 이번에는 나머지를 작성하려 합니다. 들어가기 전, 프로젝트 구조를 잡기 위해 오늘 작성할 파일들을 아래와 같이 생성합니다.
파일을 생성했다면, 이젠 컴포넌트를 작성해볼까요.
Add User Component
이전글에서 작성한 UserListComponent.jsx 파일을 다시 확인할까요? 유저를 추가하기 위해 "Add User" 버튼을 누르면 <button>에서 설정한 onChange()가 실행이 되면서 "/add-user"로 이동하도록 했습니다. 우리는 route에서 "/add-user"로 이동하면 이제 곧 작성할 AddUserComponent.jsx 파일을 보여주도록 작성할겁니다.
우리가 만들 AddUserComponent는 간단합니다. 먼저 입력받을 유저 정보를 state에 작성합니다. 어떤 정보를 작성받을지 지난글 List컴포넌트에서 작성했네요. 그리고 input태그에 이 정보들을 입력받게 하는데, 각 input태그마다 onChange()를 두어 실시간으로 setState를 통해 state값을 저장하게 합니다. 다 입력 후 "Save" 버튼을 누르면 API통신을 통해 DB에 저장하도록 할 겁니다. 이제 이를 코드로 작성해볼까요?
AddUserComponent.jsx
import React, { Component } from 'react';
class AddUserComponent extends Component{
constructor(props){
super(props);
this.state = {
username: '',
password: '',
firstName: '',
lastName: '',
age: '',
salary: '',
message: null
}
}
onChange = (e) => {
this.setState({
[e.target.name] : e.target.value
})
}
saveUser = (e) => {
e.preventDefault();
let user = {
username: this.state.username,
password: this.state.password,
firstName: this.state.firstName,
lastName: this.state.lastName,
age: this.state.age,
salary: this.state.salary,
}
ApiService.addUser(user)
.then( res => {
this.setState({
message: user.username + '님이 성공적으로 등록되었습니다.'
})
console.log(this.state.message);
this.props.history.push('/users');
})
.catch( err => {
console.log('saveUser() 에러', err);
});
}
render(){
return(
<div>
<h2>Add User</h2>
<form>
<div>
<label>User Name:</label>
<input type="text" placeholder="please input your username" name="username"
value={this.state.username} onChange={this.onChange} />
</div>
<div>
<label>Password:</label>
<input type="password" placeholder="please input your password" name="password"
value={this.state.password} onChange={this.onChange} />
</div>
<div>
<label>First Name:</label>
<input placeholder="please input your first name" name="firstName"
value={this.state.firstName} onChange={this.onChange} />
</div>
<div>
<label>Last Name:</label>
<input placeholder="please input your last name" name="lastName"
value={this.state.lastName} onChange={this.onChange} />
</div>
<div>
<label>Age:</label>
<input type="number" placeholder="please input your age" name="age"
value={this.state.age} onChange={this.onChange} />
</div>
<div>
<label>Salary:</label>
<input type="number" placeholder="please input your salary" name="salary"
value={this.state.salary} onChange={this.onChange} />
</div>
<button onClick={this.saveUser}>Save</button>
</form>
</div>
);
}
}
export default AddUserComponent;
Edit User Component
Edit 컴포넌트는 이전글에서 작성한 Add 컴포넌트와 상당히 유사합니다. 여기에서도 CompoentDidMount()를 사용해 유저정보를 API통신을 통해 DB에서 불러옵니다. 어떻게 불러오는지는 이미 여러분들이 작성하신 List 컴포넌트에 답이 나와있습니다. 제가 밑에서 알려드리기 전에 먼저 찾아보세요. 그리고 밑에서 확인하세요.
<button onClick={() => this.editUser(user.id)}>Edit</button>
우리는 List 컴포넌트에서 "Edit" 버튼을 이렇게 작성했습니다. "Edit" 버튼을 만들기 이전에 DB에서 유저리스트를 하나씩 출력하기 위해 "map"을 사용했습니다. 여기에서 id값을 editUser()의 파라미터로 넘기도록 작성했습니다. 예를 들어, MySQL DB에 저장된 username이 "피카츄"인 유저의 id가 1이라 한다면, 여기서 user.id는 1이 되겠죠. username이 "피카츄"인 유저정보를 수정하고자 해당 row에 있는 "Edit" 버튼을 누르면, onClick()을 통해 파라미터값으로 1을 가지고 editUser()가 실행됩니다.
editUser = (ID) => {
window.localStorage.setItem("userID", ID);
this.props.history.push('/edit-user');
}
editUser()는 파라미터로 넘어온 값을 localStorage를 통해 저장하고 "/edit-user"로 이동합니다. 위 예시에서 파라미터값으로 1이 넘어왔으니 localStorage를 통해 1이란 값을 "userID"라는 key값으로 저장합니다. 우리는 route에서 "/edit-user"경로로 이동시 EditUserComponent.jsx를 출력하도록 설정할겁니다. 이 컴포넌트 실행시 우리가 localStorage를 통해 저장한 "userID"값으로 API통신을 통해 해당 유저 정보를 DB에서 찾아 불러올겁니다. 그리고 Add 컴포넌트에서 작성한 것 처럼 setState를 통해 정보를 재작성(수정)하고 이를 다시 API통신을 통해 DB에 저장할겁니다. 이제 코드를 작성하겠습니다.
EditUserComponent.jsx
import React, { Component } from 'react';
class EditUserComponent extends Component{
constructor(props){
super(props);
this.state = {
id: '',
firstName: '',
lastName: '',
age: '',
salary: '',
message: null
}
}
componentDidMount(){
this.loadUser();
}
loadUser = () => {
ApiService.fetchUserByID(window.localStorage.getItem("userID"))
.then( res => {
let user = res.data;
this.setState({
id: user.id,
username: user.username,
firstName: user.firstName,
lastName: user.lastName,
age: user.age,
salary: user.salary
})
})
.catch(err => {
console.log('loadUser() 에러', err);
});
}
onChange = (e) => {
this.setState({
[e.target.name] : e.target.value
});
}
saveUser = (e) => {
e.preventDefault();
let user = {
id: this.state.id,
password: this.state.password,
firstName: this.state.firstName,
lastName: this.state.lastName,
age: this.state.age,
salary: this.state.salary
}
ApiService.editUser(user)
.then( res => {
this.setState({
message : user.lastName + '님 정보가 수정되었습니다.'
})
this.props.history.push('/users');
})
.catch(err => {
console.log('saveUser() 에러', err);
})
}
render(){
return(
<div>
<h2>Edit User</h2>
<form>
<div>
<label>User Name:</label>
<input type="text" name="username" readOnly="true" defaultValue={this.state.username} />
</div>
<div>
<label>First Name:</label>
<input placeholder="Edit your first name" name="firstName" value={this.state.firstName}
onChange={this.onChange} />
</div>
<div>
<label>Last Name:</label>
<input placeholder="Edit your last name" name="lastName" value={this.state.lastName}
onChange={this.onChange} />
</div>
<div>
<label>Age:</label>
<input type="number" placeholder="Edit your age" name="age" value={this.state.age}
onChange={this.onChange} />
</div>
<div>
<label>Salary:</label>
<input type="number" placeholder="Edit your salary" name="salary" value={this.state.salary}
onChange={this.onChange} />
</div>
<button onClick={this.saveUser}>Save</button>
</form>
</div>
);
}
}
export default EditUserComponent;
잘 작성하셨나요? 다음글에서는 라우팅 컴포넌트를 작성하겠습니다.
댓글