Spring Boot, React와 같이 작업하기

Spring Boot

 

Project : Chapter01HelloGradle

Type : Gradle-Groovy

Avilable : 

 

React

 

작업환경 : src\main

 

VSCode에서 Spring Boot로 만든 프로젝트를 열고

해당 프로젝트의 src/main 위치에서 react 파일 생성한다.

 

■ 파일 생성

npx create-react-app front

 

* react, 대문자 안됨

 

■  react 서버 키기

npm start

 

■  파일 위치

src

   main

      front (리액트)

          src

              components

                    BoardInput.jsx

                    BoardList.jsx

 

■   필요한 Install

npm install axios

npm install react-router-dom

 

 

 

 

 

---

React

 

 

Input

return (
    <div className='boardInput'>
        <form onSubmit={onSubmit}>
		...
		<td><input type='text' name='name' value={name} onChange={onInput} ref={nRef}/><div className='error'>{errorName}</div></td>
		...
		<td><input type='text' name='subject' value={subject} onChange={onInput} ref={sRef}/><div className='error'>{errorSubject}</div></td>
		...
		<input type='text' name='content' value={content} onChange={onInput} ref={cRef}/><div className='error'>{errorContent}</div></td>
		...
		<button type='submit'>저장</button>
        ...
};

export default BoardInput;

 

변경된 값을 boardDTO에 넣어서 한번에 저장하기

const BoardInput = () => {
    const [boardDTO, setBoardDTO] = useState({
        name: '',
        subject: '',
        content: ''
    });
    const {name, subject, content} = boardDTO;

    const onInput = (e) => {
        const {name, value} = e.target

        setBoardDTO({
            ...boardDTO,
            [name] : value
        })
    }

 

Spring Boot에 보내기

const onSubmit = (e) => {
  	...
    }else{
        axios.post('http://localhost:9000/board2/boardInput', boardDTO)
        .then(res => {
            console.log(res.data)
        })
        .catch(err => {
            console.error(err);
        });

		//초기화
        setBoardDTO({
            ...boardDTO,
            name:'',
            subject:'',
            content:''
        })

    }
}

 

 

axios.post(‘url주소’, 보낼 데이터)

.then(res => res.data) : 받아온 값

.catch(err => err) : 에러 구문

 

 

 

 

 

Spring Boot

 

 메인Application.java

 

@CrossOrigin(origins = “http://localhost:3000/”)
@SpringBootApplication //스프링 부트로 만든 애플리케이션 시작 클래스임을 의미
public class Chapter01HelloGradleApplication {

}

 

@CrossOrigin(origins = “http://localhost:3000/”)

포트번호가 다른 React와 Spring Boot를 연결시켜준다.

 

controller

@PostMapping(value="board2/boardInput")
public BoardDTO BoardInput(@RequestBody BoardDTO boardDTO) {
	service.boardInput(boardDTO);
    return boardDTO;
}

 

JSON으로 넘겨주기 때문에 @RequestBody로 받아줘야된다.

 

** 새로운 package이면 @ComponentScan(basePackages={""}) 에 추가해주어야 한다.

service

@Service
@Transactional
public class boardServiceImpl implements boardService {
	private List<BoardDTO> list;
    
    public void boardInput(BoardDTO boardDTO){
    	list.add(boardDTO);
    }
}

 

@Transactional은 Spring Framework에서 제공하는 애너테이션으로, 데이터베이스 트랜잭션을 관리하기 위해 사용된다. 이 애너테이션을 메서드나 클래스에 적용하면, 해당 메서드 또는 클래스 내에서 발생하는 모든 데이터베이스 작업이 하나의 트랜잭션으로 묶이게 된다.