[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - 5. antd 로 게시판 디자인 바꾸기

 

 

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial

 

 

 

 

 

 

 

시간이 부족한 관계로 서버 연동 + 저장 기능은 가능하면 저녁 이후 혹은 내일에 해야 할 것 같다.

 

남은 시간 동안 뭘할까 하다가 antd 라이브러리 (Ant design)를 이용하여 만든 컴포넌트들을 예쁘게 바꿔주려 한다.

 

 

ant.design/

Ant Design - The world's second most popular React UI framework

 

사실  antd 말고 material UI 나 다른 어떤 것이든 상관 없다. 다만 ui마다 사용 방법이 다르니  API를 참고하여 적용해야 한다.

 

antd 적용에 들어가기 전에 RegisterOrEdit 컴포넌트에 '뒤로가기' 버튼을 하나 더 추가했다.

 

history 기능은 아직 사용하지 않았고 react-router의 Link로 첫페이지 연결만 해놓았다.

 

 

 

// RegisterOrEdit.js

import React from "react";
import { Link } from "react-router-dom";

function RegisterOrEdit(props) {
  return (
    <div>
      <Link to="/">
        <button>←</button>
      </Link>
      <form onSubmit>
      ...
      </form>
      
      ...
    </div>
  );
}

export default RegisterOrEdit;

 

위나 아래 아무곳에나 위치해도 되지만 이왕이면 form 태그 바깥에 위치하는 것이 좋을 것 같다.

 

 

antd는 1편에서 이미 yarn add 로 설치해놨기 때문에 바로 쓰면 된다.

 

 

 

 

우선 /src/App.css  .App 보다 윗줄에 아래 문장을 추가해 준다.

 

 

// /src/App.css

@import '~antd/dist/antd.css';

 

 

 

그리고 /src/App.js 에 App.css를 import 해준다.

 

 

// /src/App.js

import "../App.css";

function App() {

...

}

 

 

 

 

 

 

 

바꾸고 싶은 컴포넌트를 고른다.

 

나는 RegisterOrEdit 컴포넌트에 있는 button을 바꿔줄 것이다.

 

 

 

atnd 의 Button 을 import 해주고 button 태그를 Button으로 바꿔준다.

모양은 아직 설정 안했지만 반영이 됐는지 보기 위해 수정/등록버튼 부분에만 type="danger"를 추가해본다.

 

 

// RegisterOrEdit.js

import { Button } from "antd";

<Link to="/">
    <Button>←</Button>
</Link>

<Button type="danger" onClick={props.handleSubmit}>
    {props.updateRequest ? "수정" : "등록"}
</Button>

 

 

 

 

바뀐 화면을 볼까

 

 

 

 

 

 

 

title input 과 content textarea 부분도 못생겼으니 바꿔보자.

 

 

같은 방법으로 import 부분에만 추가하면 되는데 textarea는 조금 다르다.

 

textarea는 Input의 하위 컴포넌트 이기 때문에 따로 빼줘야 한다.

 

 

import { Button, Input } from "antd";

const { TextArea } = Input;

<Input
  onChange={props.handleTitleChange}
  value={props.titleValue}
  type="text"
  name="title"
/>

<TextArea
  onChange={props.handleContentChange}
  value={props.contentValue}
  name="content"
/>

 

 

 

 

 

화면을 보면!

 

 

 

 

 

 

width 를 설정하지 않아 여전히 못생겼다.

 

임시 방편으로  style을 설정해주자.

 

원래는 css에서 클래스로 사용하는 것이 낫지만 나는 큰 프로젝트도 아니고 페이지 하나 만드는 것이기 때문에 그냥 해당 파일에서 style을 설정해주는 것으로 하겠다.

 

 

 

바꾼 코드 모양이다.

 

// RegisterOrEdit.js

import React from "react";
import { Link } from "react-router-dom";
import { Button, Input } from "antd";

const { TextArea } = Input;

function RegisterOrEdit(props) {
  return (
    <div style={{ maxWidth: "700px", margin: "2rem auto" }}>
      <Link to="/">
        <Button>←</Button>
      </Link>
      <form onSubmit>
        <br />
        <div style={{ maxWidth: "700px", margin: "2rem" }}>
          <label>Title: </label>
          <Input
            onChange={props.handleTitleChange}
            value={props.titleValue}
            type="text"
            name="title"
          />
          <hr></hr>
          <TextArea
            onChange={props.handleContentChange}
            value={props.contentValue}
            name="content"
          />
        </div>
        <Button type="danger" onClick={props.handleSubmit}>
          {props.updateRequest ? "수정" : "등록"}
        </Button>
      </form>
    </div>
  );
}

export default RegisterOrEdit;

 

 

 

 

 

화면에 반영 되면 이런 모습이다.

 

훨씬 예뻐졌다.

 

 

 

 

 

 

 

 

 

 

BoardPage 컴포넌트도 예쁘게 바꿔주자

 

 

간단하게 Button과 Title만 가져와보겠다.

 

 

 

// BoardPage.js

import React from "react";
import { Link } from "react-router-dom";
import BoardList from "./Sections/BoardList";
import { Button, Typography } from "antd";

const { Title } = Typography;

function BoardPage() {
  return (
    <div style={{ maxWidth: "700px", margin: "2rem auto" }}>
      <div>
        <Title>Board Title</Title>
      </div>
      <div>
        <Link to="/register">
          <Button type="primary">New Post</Button>
        </Link>
      </div>
      <div>
        <BoardList />
      </div>
    </div>
  );
}

export default BoardPage;

 

 

 

 

 

많이는 아니어도 처음보다는 예뻐졌다

 

 

 

 

 

 

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial