[React X Springboot] Controller와 Axios로 데이터 통신하기 (Get/Post)

💡프론트엔드

✅ package.json

"proxy": "http://{백엔드 컴퓨터의 IP 주소}:8080",

✔ 배포 시 AWS에 올린 탄력적 IP 주소로 변경

✔ 백엔드 컴퓨터는 외부 컴퓨터가 접근할 수 있도록 접근 허용 설정해야 함 (방화벽)

✅ 파일명.js

const [response, setResponse] = useState('')

useEffect(() => {
    axios.{get 또는 post}('{백엔드 API 주소}')
    .then(response => setResponse(response.data))
    .catch(error => console.log(error))
}, []);

✔ 데이터를 읽어올 때는 Get 메소드

✔ 데이터를 보낼 때는 Post 메소드

✔ 백엔드에서 반환하는 데이터를 response 변수에 저장

✅ 코드 사용 예

✅ Springboot - DiaryController

/**일기 저장*/
@PostMapping("/save/diary")
public void saveDiary(@RequestBody DiaryDto diaryDto) {
    diaryService.saveDiary(diaryDto);
}

/** 일기 수정 */
@PostMapping("/modify/diary")
public void modifyDiary(@RequestBody DiaryDto diaryDto) {
    diaryService.modifyDiary(diaryDto);
}

/**일기 삭제*/
@PostMapping("/delete/diary/{diaryId}")
public void deleteDiary(@PathVariable("diaryId") Long diaryId) {
    diaryService.deleteDiary(diaryId);
}

✅ Springboot - DiaryDto

public class DiaryDto {
    private Long diaryId; // 백엔드에서 자동 생성해주므로 보내지 않아도 됨
    private String subject; // 제목을 없앨까 ?
    private String content; // 일기 내용
    private String userId; // 사용자 아이디
    private EmotionEnum emotion; // 현재는 4가지 감정 존재 - 기쁨 슬픔 화남 우울
    private String img; // MultipartFile 타입으로 수정 필요
}

✅ React - 일기 생성

const [response, setResponse] = useState('')

useEffect(() => {
    axios.post('/save/diary',{
		userId:"user1@naver.com",
		content:"멋진 하루를 보냈다.",
		emotion: "기쁨",
		img: ""
	})
    .then(response => setResponse(response.data))
    .catch(error => console.log(error))
}, []);

✔ 데이터를 저장할 땐 Post 메소드

✔ 주소는 ‘/save/diary’ 로 지정

✔ 백엔드로 보낼 데이터를 Json 형태로 담음

✔ 이때 Json 변수명은 백엔드에서 설정한 Dto 내부 변수명과 같아야 함

✅ React - 일기 수정

const [response, setResponse] = useState('')

useEffect(() => {
    axios.post('/modify/diary',{
		diaryId: "1",
		userId:"user1@naver.com",
		content:"멋진 하루를 보냈다. 근데 밤에 비가 와서 슬퍼졌다.",
		emotion: "우울",
		img: ""
	})
    .then(response => setResponse(response.data))
    .catch(error => console.log(error))
}, []);

✔ 특이점 - 일기 생성과 다르게 일기의 고유 ID (기본키) 도 함께 전달해야 함

✔ 일기의 고유 ID가 있어야 수정할 특정 일기를 지정할 수 있음

✔ 위의 예시의 경우, 기본키가 1일 일기의 내용을 Json 객체의 내용으로 수정함

✅ React - 일기 삭제

const [response, setResponse] = useState('')

useEffect(() => {
    axios.post('/delete/diary/{삭제할 일기의 고유 ID}')
    .then(response => setResponse(response.data))
    .catch(error => console.log(error))
}, []);

✔ 백엔드에서 프론트엔드로 일기 정보를 전달할 때는 일기의 고유 ID (기본키) 도 함께 전달

✔ 프론트엔드에서는 이를 가지고 있다가 일기 삭제 시 주소와 함께 전달