[2] CRUD 게시판 프로젝트 - React UI 구성

Github 저장소 :https://github.com/BerkleyLim/project_board

GitHub - BerkleyLim/project_board: Spring Boot + React CRUD형 게시판 만들기 프로젝트 안내서

 

개발 환경은

Front : React 기반

Back-End : Spring Boot 기반

DB : My-SQL 기반

 

Nodejs 및 npm 패키지 / java와 maven 이 미리 설치를 한 상태로 먼저 환경 설정을 셋팅을 한다.

 

 

 

1. Bootstrap 셋팅

1) src/index.js에 아래와 같이 import 한다. 이것은 각 모듈마다 bootstrap이 적용이 된다.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

 

 

2) 다음으로는 src/App.js를 모든 내용을 제거 후 reactstrap으로 Card형 UI 작성

function App() {
  return (
    <div className="container">
      <h1>게시판 프로젝트</h1>
      <br/><br/><br/><br/>
      
      <Card className="my-2" color="primary" outline>
        <CardHeader>제목</CardHeader>
        <CardBody>
          <CardText>내용</CardText>
          <br />
          <br />
          <Row>
            <Col sm={{ offset: 3, size: "auto" }}>
              <Button color="primary">수정</Button>
            </Col>
            <Col sm={{ offset: 4, size: "auto" }}>
              <Button color="danger">삭제</Button>
            </Col>
          </Row>
        </CardBody>
      </Card>
    </div>
  );
}

 

이때, 아래와 같이 UI가 표시됩니다.

 

 

3) 이때, src/App.css를 아래와 같이 변경하여 컴포넌트 조정해줍니다.

.container {
  margin : 0 auto;
  width: 1200px;
  padding: 20px;
}

 

 

4) 사용할 샘플 데이터를 추가해줍니다. (게시판에 사용할 데이터 : bno, title, contents) 
  이후, console.log를 이용하여 데이터가 들어갔는지 확인합니다.

  const data = [
    {
      bno: 1,
      title: "제목1",
      contents: "내용1",
    },
    {
      bno: 2,
      title: "제목2",
      contents: "내용2",
    },
    {
      bno: 3,
      title: "제목3",
      contents: "내용3",
    },
    {
      bno: 4,
      title: "제목4",
      contents: "내용4",
    },
  ]

  console.log(data);

 

 

5) 이후, 리액트 훅을 이용하여 useState()를 통해 데이터를 넣고 useEffect() 작업 후 state 값을 반환하면 state 값을 넣을 수 있습니다.

  const [board, setBoard] = useState();

  useEffect(() => {
    setBoard(data);
  },[])
  console.log(board);

 

 

6) 다음으로 return() 부분을 map으로 이용하여 data 길이만큼 호출 시켜줍니다.
  이 때, board?.map() 함수는 board 값이 있을 때만 실행 됩니다.

  {board?.map((b, index) => (
    <Card key={index} className="my-2" color="primary" outline>
      {/* <CardHeader>제목</CardHeader> */}
      <CardHeader>{b?.title}</CardHeader>
      <CardBody>
        {/* <CardText>내용</CardText> */}
        <CardText>{b?.contents}</CardText>
        <br />
        <br />
        <Row>
          <Col sm={{ offset: 3, size: "auto" }}>
            <Button color="primary">수정</Button>
          </Col>
          <Col sm={{ offset: 4, size: "auto" }}>
            <Button color="danger">삭제</Button>
          </Col>
        </Row>
      </CardBody>
    </Card>
  ))}

 

 

7) 여기까지 하였으면 다음과 같은 결과를 얻을 수 있습니다.

 

 

8) 완성 코드

import {
  Card,
  CardHeader,
  CardBody,
  CardText,
  Button,
  Row,
  Col,
} from "reactstrap";
import "./App.css";
import { useEffect, useState } from "react";

function App() {
  const data = [
    {
      bno: 1,
      title: "제목1",
      contents: "내용1",
    },
    {
      bno: 2,
      title: "제목2",
      contents: "내용2",
    },
    {
      bno: 3,
      title: "제목3",
      contents: "내용3",
    },
    {
      bno: 4,
      title: "제목4",
      contents: "내용4",
    },
  ];
  // console.log(data);

  const [board, setBoard] = useState();

  useEffect(() => {
    setBoard(data);
  }, []);
  console.log(board);

  return (
    <div className="container">
      <h1>게시판 프로젝트</h1>
      <br />
      <br />
      <br />
      <br />
      {board?.map((b, index) => (
        <Card key={index} className="my-2" color="primary" outline>
          {/* <CardHeader>제목</CardHeader> */}
          <CardHeader>{b?.title}</CardHeader>
          <CardBody>
            {/* <CardText>내용</CardText> */}
            <CardText>{b?.contents}</CardText>
            <br />
            <br />
            <Row>
              <Col sm={{ offset: 3, size: "auto" }}>
                <Button color="primary">수정</Button>
              </Col>
              <Col sm={{ offset: 4, size: "auto" }}>
                <Button color="danger">삭제</Button>
              </Col>
            </Row>
          </CardBody>
        </Card>
      ))}
    </div>
  );
}

export default App;

 

마치며,

기본적인 게시판 UI를 구현해보았습니다.

다음 시간에는 Front 스타일로 CRUD 구현해보겠습니다.