리엑트+스프링부트(3) 글 쓰기

간단하게 글쓰기를 구현해보고자 한다. 

 

우선 리엑트에서는

 

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


function Write(){

    const [id, Setid] = useState();
    const [title, SetTitle] = useState("");
    const [content, SetContent] = useState("");

    
    return(
    


    <div>
        <form method='post' action='/board/insert'>
            <div>
                <input name='title'></input>
            </div>
            <div>
                <textarea name='content'></textarea>
            </div>
            <button type='submit'>글 작성a</button>
        </form>
    </div>
        )
    }

export default Write;

이런 간단한 컴포넌트를 하나 만들었다

 

 <a href='/Write'>글쓰기</a>

메인 컴포넌트에서 글쓰기를 누르면 위의 컴포넌트로 이동한다. 

<Route path="/write" element={ <Write/> } />

라우터를 사용하였다. 

라우터쓰는 방법은 많이 나와있으니 참고바란다. 

 

리엑트에서도 form을 써도 되나 싶긴하지만 아직은 리린이라 그냥 진행해보자 

 

스프링부트로 넘어가보자

 

    @PostMapping("/board/insert")
    public void boardinsert(Board board){
        boardService.insert(board);
    }

우선 컨트롤러를 보자면 리엑트에서 폼으로 데이터를 넘긴다 

이때 board 형식으로 받아준다. 

board는 enfity에 있다 즉 vo와 비슷함 

 

@Entity
@Data
public class Board {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY) //

    private Integer id;
    private String title;
    private String content;


}

단 3줄짜리 entity이다 나중에 id로 페이징도 할것이다. 

내용과 제목 끝 정말 간단하다.

 

그리고 레포지토리를 등록하자

 

@Repository
public interface BoardRepository extends JpaRepository<Board,Integer> {
}

이부분은 jpa 시간에도 많이 했던거라 생략한다. 

 

그리고 서비스를 작성하자

 

   public void insert(Board board){
        boardRepository.save(board);
    }

jpa의 함수 save(객체)를 써서 간단하게 글 등록을 마칠 수 있엇다. 

 

글 등록을 해보자 

 

글쓰기를 누르면 

 

 

블로그 테스트용~ 으로 글을 남겼다. 글 작성을 누르면 

아래와 같이 등록이된다. 

 

 

 

https://github.com/MoonSeokHyun

MoonSeokHyun - Overview