SpringBoot #6 SpringBoot+React 기반 간단한 게시판 생성하기 #4 게시판 관련 컴포넌트 및 Router 컴포넌트 구현

이전글

https://yonghwankim-dev.tistory.com/143

SpringBoot #6 SpringBoot+React 기반 간단한 게시판 생성하기 #3 React 프로젝트 생성

 

개요

이전 글에서는 리액트 프로젝트를 생성하였습니다. 이번 글에서는 리액트(React)를 기반으로 게시판 관련 컴포넌트를 구현하고 게시판 컴포넌트로 안내하기 위한 라우터(Router) 컴포넌트를 구현하는 것을 목표로 합니다.

 

1. 게시판 리스트 컴포넌트 생성

디렉터리를 아래 그림과 같이 생성합니다. src/component, src/component/route, src/component/webBoard 디렉터리 생성합니다.

src/component/webBoard/WebBoardListComponent.jsx 파일 생성

WebBoardListComponent.jsx

import React, {Component} from 'react';
import ApiService from "../../ApiService";
import queryStirng from 'query-string';

class WebBoardListComponent extends Component{
    constructor(props){
        super(props);

        this.state = {
            boards : [],
            message : null
        }
    }

    componentDidMount(){
        this.reloadWebBoardList();
    }

    reloadWebBoardList = ()=>{
        ApiService.fetchWebBoards().then(res=>{         
                                                    this.setState({
                                                                    boards:res.data.content
                                                                    })

                                        })
                                        .catch(err=>{
                                            console.log("reloadWebBoardList() Error!",err);                        
                                        });
    }

    render(){
        return(
            <>
            <div>
                <h2>WebBoard List</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Bno</th>
                            <th>Title</th>
                            <th>Wirter</th>
                            <th>Content</th>
                            <th>Regdate</th>
                            <th>Updatedate</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.boards.map( board=>
                                    <tr key={board.bno}>
                                        <td>{board.bno}</td>
                                        <td>{board.title}</td>
                                        <td>{board.writer}</td>
                                        <td>{board.content}</td>
                                        <td>{board.regdate}</td>
                                        <td>{board.updatedate}</td>
                                    </tr>
                                )
                        }
                    </tbody>
                </table>
            </div>
            </>
        );
    }
}

export default WebBoardListComponent;

위의 코드내용에서 reloadWebBoardList 함수의 기능은 게시글의 목록을 출력하는 기능입니다. 내용은 추후 구현됩니다.

 

2. 라우터(Router) 컴포넌트 생성

src/component/route/RouterComponent.jsx

import {BrowserRouter, Route, Switch} from 'react-router-dom'
import WebBoardListComponent from '../webBoard/WebBoardListComponent'

const AppRouter = ()=>{
    return(
        <div>
            <BrowserRouter>
            <div>
                <Switch>
                    <Route exact path="/boards/list" component={WebBoardListComponent}/>
                </Switch>
            </div>
            </BrowserRouter>
        </div>
    );
}


export default AppRouter;

 

3. ApiService 생성 및 작성

src/ApiService.js 생성 및 작성

import axios from 'axios';

const BOARD_API_BASE_URL = "http://localhost:8080/boards";

class ApiService{
    fetchWebBoards(){
        return axios.get(BOARD_API_BASE_URL + "/list");
    }
}

export default new ApiService();

 

4. SpringBoot 프로젝트 컨트롤러 수정

SpringBoot boot06 프로젝트에서 org.zerock.controller.WebBoardController.java 내용은 다음과 같았습니다.

before (org.zerock.controller.WebBoardController.java)

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/boards/")
@Log
public class WebBoardController {
	
	@Autowired
	private WebBoardRepository repo;
	
	@GetMapping("/list")
	public void list(PageVO vo) {
	
		Pageable page = vo.makePageable(0, "bno");
		
		Page<WebBoard> result = repo.findAll(repo.makePredicate(null, null), page);
		
		log.info(""+page);
		log.info(""+result);
		
		result.getContent().forEach(board->System.out.println(board));
	}
}

위 코드 내용은 콘솔에 출력하기 위한 코드입니다. 하지만 이제는 리액트로 웹 페이지를 구현을 하였으므로 연동 테스트를 위해서 아래와 같은 코드로 변경합니다.

after(org.zerock.controller.WebBoardController.java)

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
@RequestMapping("/boards/")
@Log
public class WebBoardController {
	
	@Autowired
	private WebBoardRepository repo;
	
	@GetMapping("/list")
	public Page<WebBoard> list(PageVO vo) {
	
		Pageable page = vo.makePageable(0, "bno");
		
		Page<WebBoard> result = repo.findAll(repo.makePredicate(null, null), page);
		
		log.info(""+page);
		log.info(""+result);
		
		return result;
	}
}

 

5. React 프로젝트 및 SpringBoot 프로젝트 실행

React 프로젝트 실행

SpringBoot/front-end/boo06 $ npm start

SpringBoot 프로젝트 실행

 

브라우저에서 http://localhost:3000/boards/list 접속하여 게시판의 게시물이 잘 나오는지 결과를 학인합니다.

위의 웹 페이지와 같이 게시판의 게시물 목록이 출력된다면 React+SpringBoot+MySQL 연동이 완료된 것입니다. 다음 글에서는 웹 페이지에 페이지 번호 버튼을 생성하고 페이지 처리를 할 수 있도록 구현할 것입니다.

 

References

source code : https://github.com/yonghwankim-dev/SpringBoot-Study
스타트 스프링 부트, 구멍가게코딩단 지음
[리액트, 스프링부트 연동하여 CRUD 구현] #8 - 스프링부트에서 환경설정하기 (8/10) , https://corini.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-%EC%97%B0%EB%8F%99%ED%95%98%EC%97%AC-CRUD-%EA%B5%AC%ED%98%84-8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8%EC%97%90%EC%84%9C-%ED%99%98%EA%B2%BD%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-8n?category=836393