React.js와 SpringBoot 연동하기

둘은 완전 다른 서버를 사용

서로 다른 프로젝트가 2개 나오게 됨.

 

다른 서버를 사용하므로 버튼 클릭 시 비동기로 데이터를 전송함

따라서 폼태그는 반드시 막아줘야 함

e.preventDefault();

 

BackEnd(STS Tool)

WebConfig에서 접속 허용해줌

 

view가 오지 않고 데이터로 옴(View 없음)

@RestController 사용

프론트에서 데이터가 오면 데이터베이스에 넣고 응답을 프론트로 전달해줌

 

벡앤드에서는 페이지를 아예 사용하지 않는다.

-> 에러날 경우 프론트로 전달해서 프론트에서 알아서 처리하도록 해야한다.

 

 

FrontEnd(VSCode)

터미널에서 설치

npm install axios

 

import axios from 'axios'

 

post방식으로 벡앤드 경로를 설정해주고 데이터를 전송, 응답을 받아온다.

 

받은 응답을 Modal 창으로 띄워줬다.

 

리엑트에서 공용 코드(라이브러리 스크립트)는 public의 index.html에 추가한다.

이미지도 public에 추가한다.

 

프론트에서 화면 이동

window.location.href='/path';

(데이터를 가져가지는 못 한다.)

 

해당 화면이 뜨자마자 나와야 할 때 Hook의 useEffect() 사용(JSP onload와 비슷)

 

Board 리엑트로 변경

Board에서 여러개의 파일을 업로드하기

-> 기존의 1:1관계에서 Board테이블이 1, BFile테이블이 many로 관계를 바꿔준다.

(file이 boardNum 가지고 있도록 함)

 

useEffect() 끝에 반드시 [] 붙여줘야 한다.

useState 값을 가져올 때는 반드시 rerendering이 된 후 값을 가져와야 한다.

 

useNavigate로 가져온 데이터는 이름이 반드시 같아야 한다.

 

react-router의 useNavigate를 사용하면 프론트에서 화면 이동시 데이터를 같이 넘겨줄 수 있다.

 

useNavigate를 사용할 땐 경로에 데이터를 표시해줘야 한다.

객체로 넘어가므로 여러개 선언도 가능하다.

/Path/:data1/:data2 형식

 

화면에 선택한 파일들을 보여준다.

 

해당 파일들을 받고 BoardDto에 파일번호 리스트를 구분자 , 를 추가해서 넣어준다.

 

데이터베이스 삭제 시 참조키가 있어 오류날 때

Board 삭제 시 Board의 기본키를 참조하는 File도 삭제되도록 함