[리액트, 스프링부트 연동하여 CRUD 구현] #3 - User List Component 생성 및 Delete 구현 (3/10)

리액트, 스프링부트 연동하여 CRUD 구현하기

#3 User List Component 생성 및 Delete 구현

이번 글에서 CRUD에서 R과 D를 담당하고 있는 Read와 Delete를 생성하겠습니다. 위키디피아에서 CRUD를 다음과 같이 설명합니다.

"대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다. 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로서도 사용된다."

- 위키디피아

즉, 게시판의 기본이자 핵심 기능인 글 목록보기, 생성, 수정 그리고 삭제를 일컫는 말이다.

글 게시 순서는 읽기, 생성, 갱신 및 삭제 순으로 할 것이다. 왜 이렇게 하냐 하면 논리적인 부분때문이긴 한데... 

리액트 컴포넌트

리액트 컴포넌트를 쉽게 생각해서 레고 블럭이라고 하면 어떨까. 예를 들어 레고 xx시리즈를 구입했다 하자. 완성품을 만들기 위해선 상품 안에 있는 레고 부품들을 하나씩 잘 조립해야 할 것이다. 여기에서 레고 부품 하나하나가 리액트 컴포넌트이며, 이 레고 부품들을 다 조립하여 완성품을 만든 것이 리액트 컴포넌트로 만든 하나의 웹앱이다. 이렇게 레고를 가지고 비유한 이유는 우리가 리액트로 만들고자 하는 하나의 웹앱이 있다면 그 웹앱은 여러가지 리액트 컴포넌트들로 구성되어 있기 때문이다.

이렇듯 리액트 컴포넌트는 하나의 (리액트로 만든)웹앱을 구성하는 각 레고 블럭들이다. 각 컴포넌트들은 props와 state를 통해 데이터를 입력받아 브라우저에서 이를 렌더링하여 UI를 통해 결과물을 출력한다. 리액트 컴포넌트는 여러분들이 직접 만들 수 있으며, 다른 웹앱에도 재사용할 수 있다. (마치 레고 블럭과 같지 않은가!)

리액트 컴포넌트는 함수형과 클래스형 이렇게 2가지 종류로 구성되어 있다. 함수형 컴포넌트의 주요 특징으로는 클래스형 컴포넌트보다 단순하게 구성되어 있다는 점이다. 컴포넌트에 하나의 함수만 사용한다면 함수형을 써도 된다. 하지만 그 이상으로 복잡하고 정교한 형태의 컴포넌트를 구성하기 위해선 클래스형의 컴포넌트를 사용해야 한다.

함수형 컴포넌트 기본 구조

import React from 'react';

const UserComponent = (props) => {

return(

<div className="container">

컴포넌트 내용 작성부분

</div>

);

}

export default UserComponent;

클래스형 컴포넌트 기본 구조

import React, { Component } from 'react';

class UserComponent extends Component{

render(){

return(

<div className="container">

컴포넌트 내용 작성부분

</div>

);

}

}

export default UserComponent;

혹시 이 두 구조의 공통점이 보이시나요? 바로 컴포넌트 내용 작성이 return()에서, 정확히는 return() 내 <div>에서 이루어집니다. 이 <div> 안에서 우리가 사용하는 태그는 HTML 태그가 아닙니다. HTML로 보이겠지만, 이는 HTML이 아닌 JSX라는 자바스크립트 확장 문법입니다. 컴포넌트를 다 작성 후 앱을 실행할 때, React API는 이 JSX 문법을 순수 자바스크립트로 컴파일을 합니다. 그리고 그 결과를 우리가 브라우저를 통해 확인합니다. 아래는 위에서 설명한 컴파일 과정을 쉽게 예시로 적어보았습니다.

<div className="container">

<h1>My First React App</h1>

</div>

React.createElement("div", {className: "container"},

React.createElement("h1", null, "My First React App")

)

props are the list of object that an HTML element can have. Props are read-only and can not be modified.

props 정의 및 설명..

state 정의 및 설명...

List User Component 작성

작성하기 전 설명

디렉토리 구조

UserListComponent.jsx

import React, { Component } from 'react';

class UserListComponent extends Component{

constructor(props){

super(props);

this.state = {

users: [],

message: null

}

}

componentDidMount(){

this.reloadUserList();

}

reloadUserList = () => {

ApiService.fetchUsers()

.then( res => {

this.setState({

users: res.data

})

})

.catch(err => {

console.log('reloadUserList() Error!', err);

})

}

deleteUser = (userID) => {

ApiService.deleteUser(userID)

.then( res => {

this.setState({

message: 'User Deleted Successfully.'

});

this.setState({

users: this.state.users.filter( user =>

user.id !== userID)

});

})

.catch(err => {

console.log('deleteUser() Error!', err);

})

}

editUser = (ID) => {

window.localStorage.setItem("userID", ID);

this.props.history.push('/edit-user');

}

addUser = () => {

window.localStorage.removeItem("userID");

this.props.history.push('/add-user');

}

render(){

return(

<div>

<h2>User List</h2>

<button onClick={this.addUser}> Add User </button>

<table>

<thead>

<tr>

<th>ID</th>

<th>FistName</th>

<th>LastName</th>

<th>UserName</th>

<th>Age</th>

<th>Salary</th>

</tr>

</thead>

<tbody>

{this.state.users.map( user =>

<tr key={user.id}>

<td>{user.firstName}</td>

<td>{user.lastName}</td>

<td>{user.username}</td>

<td>{user.age}</td>

<td>{user.salary}</td>

<td>

<button onClick={() => this.editUser(user.id)}>Edit</button>

<button onClick={() => this.deleteUser(user.id)}>Delete</button>

</td>

</tr>

)}

</tbody>

</table>

</div>

);

}

}

export default UserListComponent;

Delete User 버튼 - 구조는 이렇습니다. "Delete" 버튼을 누르면 API통신을 사용해 DB에서 해당 유저를 삭제합니다. 그리고 filter라는 기능을 통해 state에 있는 users배열에서 삭제된 해당 유저 id를 제외하고 다시 배열로 나타냅니다. (여기에서는 API통신을 ApiService로 표현했으며, 이 프로젝트에선 axios라는 걸 사용할겁니다. )

Edit User 버튼 - "Edit" 버튼을 누르면 브라우저 로컬스토리지(brower localstorage)를 사용해 해당 유저 id를 일시적으로 저장하고, route를 통해 EditUserComponent.jsx로 이동합니다. route에서 "/edit-user" url로 이동하면 EditUserComponent.jsx를 보여주도록 설정할겁니다.