퐁당 웹 매거진 프로젝트 제작 일지 <11>

2023.10.18 (WED)

1. 검색용 DB 생성 후, 불러오기 테스트

리액트와 스프링부트 연동을 하는데, 중점을 두었다.
예제로, 테이블의 json을 받아와 출력하도록 하였다.

Result.js

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

import "./Result.css";

export default function SearchBar() {
    const [interviews, setInterviews] = useState([]);

    useEffect(() => {
        fetch('/v1/interview') // Endpoint
            .then(response => response.json())
            .then(data => setInterviews(data))
            .catch(error => console.error(error));
    }, [])

    return (
        <div className="Result_Search">
            {/* interviews 배열에 맞게 데이터 렌더링 */}
            {interviews.map(interview => (
                <div key={interview.id}>
                    <h3>{interview.interview_title}</h3>
                    <p>{interview.interviewee}</p>
                </div>
            ))}
        </div>
    )
}

InterviewController.java

@RestController // Json 형태 결과값 반환
@RequiredArgsConstructor // final 객체를 Constructor Injection (Autowired 역할)
@RequestMapping("/v1") // version1의 api
public class InterviewController {

    private final InterviewRepository interviewRepository;

    /**
     * 조회
     *
     * @return
     */
    @GetMapping("interview")
    public List<InterviewEntity> findAllInterview() {
        return interviewRepository.findAll();
    }

}

결과 화면

testDB