[React] 리액트 게시판 만들기 #4 - 게시글 조회(목록, 상세)

안녕하세요. 원더제이입니다.
이전 포스팅에서 레이아웃을 구성했습니다.

이번 포스팅에서는 게시판 목록 조회 API를 호출해서 화면에 출력해보겠습니다.

Axios 설치

API를 호출하기 위해 먼저 axios를 설치하겠습니다.

frontend 디렉토리로 이동합니다.

cd frontend

패키지 매니저로 yarn을 사용하기 위해 먼저 yarn 을 설치합니다.

npm install -g yarn

이어서 axios를 설치합니다.

yarn add axios

프론트 개발 서버를 시작하고 정상적으로 부팅되는지 확인합니다.

yarn start

이전 포스팅까지 작업했던 내용이 잘 나타나면 이제 게시판 목록을 호출해보겠습니다.

게시판 목록 조회

먼저 axios를 통해 게시판 목록을 조회하는 함수를 생성합니다.

/* BoardList.js */
import React, {useEffect} from 'react';
import axios from "axios";

const BoardList = () => {
  const getBoardList = async () => {
    const resp = (await axios.get('//localhost:8080/board')).data
    console.log(resp.data)
  }

  return (
    <div>
      게시판 목록 출력
    </div>
  );
};

export default BoardList;

선언한 함수는 호출되어야 데이터를 확인할 수 있습니다.
react의 useEffect를 통해 화면으로 처음 이동했을때 한번 호출되도록 코드를 추가합니다.

import React, {useEffect, useState} from 'react';
import axios from "axios";

const BoardList = () => {
  const [boardList, setBoardList] = useState([]);

  const getBoardList = async () => {
    const resp = await (await axios.get('//localhost:8080/board')).data; // 2) 게시글 목록 데이터에 할당  
    setBoardList(resp.data); // 3) boardList 변수에 할당
    console.log(boardList);
  }

  useEffect(() => {
    getBoardList(); // 1) 게시글 목록 조회 함수 호출
  }, []);

  return (
    <div>
      게시판 목록 출력
    </div>
  );
};

export default BoardList;

백엔드 서버가 실행되고 있어야 데이터를 조회할 수 있습니다.
src/main/java/com.example.reactboard/ReactBoardApplication.java 파일에서 오른쪽 클릭 후 Run ReactBoardApplication을 선택합니다.

아래처럼 로그가 실행된다면 부팅이 완료된것입니다.

이제 다시 프론트 화면으로 돌아가 데이터가 호출되는지 확인합니다.

데이터를 정상적으로 호출하여 콘솔창에 출력되었습니다.

이제 가져온 데이터를 화면에 뿌리는 코드를 작업해줍니다.

import React, {useEffect, useState} from 'react';
import axios from "axios";

const BoardList = () => {
  const [boardList, setBoardList] = useState([]);

  const getBoardList = async () => {
    const resp = await (await axios.get('//localhost:8080/board')).data; // 2) 게시글 목록 데이터에 할당
    setBoardList(resp.data); // 3) boardList 변수에 할당

    const pngn = resp.pagination;
    console.log(pngn);
  }

  useEffect(() => {
    getBoardList(); // 1) 게시글 목록 조회 함수 호출
  }, []);

  return (
    <div>
      <ul>
        {boardList.map((board) => (
          // 4) map 함수로 데이터 출력
          <li key={board.idx}>{board.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default BoardList;

데이터를 정상적으로 가져왔습니다.

이어서 상세보기 페이지로 이동할 수 있도록 li 태그를 수정합니다.

import React, {useEffect, useState} from 'react';
import axios from "axios";
import {Link} from "react-router-dom";

const BoardList = () => {
  const [boardList, setBoardList] = useState([]);

  const getBoardList = async () => {
    const resp = await (await axios.get('//localhost:8080/board')).data; // 2) 게시글 목록 데이터에 할당
    setBoardList(resp.data); // 3) boardList 변수에 할당

    const pngn = resp.pagination;
    console.log(pngn);
  }

  useEffect(() => {
    getBoardList(); // 1) 게시글 목록 조회 함수 호출
  }, []);

  return (
    <div>
      <ul>
        {boardList.map((board) => (
          // 4) map 함수로 데이터 출력
          <li key={board.idx}>
            <Link to={`/board/${board.idx}`}>{board.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default BoardList;

게시글 상세보기

현재는 제목을 클릭해서 상세보기 페이지로 이동해도 아무런 데이터가 표시되지 않습니다.

상세보기 페이지를 라우터에 추가한 후 상세보기 컴포넌트를 추가해주어야 합니다.

먼저, routes 디렉토리에 BoardDetail.js를 추가합니다.

/* BoardDetail.js */
import React from 'react';

const BoardDetail = () => {
  return (
    <div>
      게시판 상세보기가 표시됩니다.
    </div>
  );
};

export default BoardDetail;

그리고 App.js에 라우팅 정보와 컴포넌트를 추가합니다.

/* App.js */
import {Route, Routes} from "react-router-dom";
import BoardList from "./routes/BoardList";
import Home from "./routes/Home";
import React from "react";
import BoardDetail from "./routes/BoardDetail";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home/>}/>
      <Route path="/board" element={<BoardList/>}/>
      <Route path="/board/:idx" element={<BoardDetail/>}/>
    </Routes>
  );
}

export default App;

상세보기 페이지로 이동되는지 확인합니다.

페이지 이동이 확인되었다면 src/components 디렉토리를 생성하고 Board.js 컴포넌트를 생성합니다.
Board.js는 상세보기에 해당하는 데이터를 받아 화면에 출력할 컴포넌트 입니다.

/* Board.js */
import React from 'react';

const Board = ({ idx, title, contents, createdBy }) => {
  return (
    <div>
      <h2>{title}</h2>
      <h5>{createdBy}</h5>
      <hr />
      <p>{contents}</p>
    </div>
  );
};

export default Board;

이어서 BoardDetail에서 게시글 상세 내용을 조회하도록 코드를 수정합니다.

/* BoardDetail.js */
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import Board from '../components/Board';

const BoardDetail = () => {
  const { idx } = useParams(); // /board/:idx와 동일한 변수명으로 데이터를 꺼낼 수 있습니다.
  const [loading, setLoading] = useState(true);
  const [board, setBoard] = useState({});
  const getBoard = async () => {
    const resp = await (await axios.get(`//localhost:8080/board/${idx}`)).data;
    setBoard(resp.data);
    setLoading(false);
  };

  useEffect(() => {
    getBoard();
  }, []);

  return (
    <div>
      {loading ? (
        <h2>loading...</h2>
      ) : (
        <Board
          idx={board.idx}
          title={board.title}
          contents={board.contents}
          createdBy={board.createdBy}
        />
      )}
    </div>
  );
};

export default BoardDetail;

게시글 상세보기 이동시 데이터가 잘 출력되는지 확인합니다.

아래는 현재까지의 디렉토리 구조입니다.

해당 챕터의 소스는 https://github.com/onethejay/react-board/tree/chap4 에 업로드 되어있으며 챕터 마무리시 master에 마지막 챕터의 소스를 merge 하고 있습니다.
참고가 필요하신분은 해당 깃허브를 참고해주시기 바랍니다 :)

감사합니다.

번외

prettier 플러그인을 사용하면 줄바꿈, 세미콜론등 자동으로 정렬해주는 기능을 사용할 수 있습니다.

먼저 frontend 디렉토리 위치에서 prettier를 설치해야 합니다.

npm install prettier
또는
yarn add prettier

packages.json 파일과 동일한 위치에 .prettierrc 파일을 생성합니다.

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2
}

인텔리제이의 경우 prettier에 해당하는 체크 박스를 선택해주면,
Ctrl + Alt + L (라인 정렬) 또는 Ctrl + S (저장) 입력시 prettierrc 설정에 맞게 줄바꿈 및 세미콜론, 들여쓰기, 따옴표를 정리해줍니다.