[React + Spring]리액트와 스프링으로 API 받아서 처리하기

 

 

이해하려면 전 편을 보고오자!

[React + Spring]리액트와 스프링 - 연동 (tistory.com)

[React + Spring]리액트와 스프링 - 연동

[Spring]Spring - RestTemplate (tistory.com)

[Spring]Spring - RestTemplate

 

📝 사용할 API

한국장애인고용공단_장애인 구인 실시간 현황 | 공공데이터포털 (data.go.kr)

한국장애인고용공단_장애인 구인 실시간 현황

 

전 포스팅에서 처리하는 방법을 소개했다. 

📝 Spiring API 처리 

스프링 서버 API 처리 URI

  @GetMapping("/jobs")
  public ResponseEntity<ResponseData.Items> callApi(
      @RequestParam(value = "page") String page,
      @RequestParam(value = "local") String local
  ) {
    log.info("API 호출" + page + local);
    try {
      // API 호출 및 응답 받기
      RestTemplate restTemplate = new RestTemplate();
      String url = apiUrl + "?serviceKey=" + secretKey + "&pageNo=" + page + "&numOfRows=100";
      ResponseEntity<ResponseData> responseEntity = restTemplate.getForEntity(url, ResponseData.class);

      // 받은 local 파라미터를 이용하여 compAddr의 앞 단어를 기준으로 검색
      ResponseData responseData = responseEntity.getBody();
      if (responseData != null && responseData.getBody() != null && responseData.getBody().getItems() != null) {
        List<ResponseData.Item> filteredItems = new ArrayList<>();
        String targetPrefix = local.split(" ")[0]; // local 파라미터를 공백을 기준으로 분리하고 첫 번째 단어를 선택
        for (ResponseData.Item item : responseData.getBody().getItems().getItem()) {
          if (item.getCompAddr().startsWith(targetPrefix)) {
            filteredItems.add(item);
          }
        }
        responseData.getBody().getItems().setItem(filteredItems);
      }

      return new ResponseEntity<>(responseData.getBody().getItems(), responseEntity.getStatusCode());
    } catch (Exception e) {
      log.error("API 호출 중 에러 발생",e);
      // 예외 발생 시 에러 응답 반환
      return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);
    }
  }

 

자세한 설명은 위 포스팅을 보자 

 

📝 React에서 사용하기 

function Job() {
    const [jobList, setJobList] = useState([]); //데이터 리스트
    const [region, setRegion] = useState("서울특별시"); //지역 이름
    const [page, setPage] = useState(1); //페이지 

	//useEffect 훅 page와 region이 바뀔 때 데이터 리스트를 불러내고 재랜더링
    useEffect(() => {
        fetchJobs();
    }, [page, region]);

	//백엔드 단에서 API를 요청하는 함수
    const fetchJobs = () => {
        axios.get(`/jobs?page=${page}&local=${region}`)
            .then((res) => {
                setJobList(res.data.item);
            })
            .catch((error) => {
                console.error("Error fetching job listings:", error);
            });
    };

    const handleRegionChange = (event) => {
        setRegion(event.target.value);
        setPage(1);
    };

    const handlePageChange = () => {
        setPage(page + 1); 
    };

    return (
        <div className="job-board-container">
            <select className="select-region" value={region} onChange={handleRegionChange}>
                <option value="">All Regions</option>
                <option value="서울특별시">서울특별시</option>
                <option value="경기도">경기도</option>
            </select>
            <button className="load-more-button" onClick={handlePageChange}>Load More</button>

            <ul className="job-list">
                {jobList.map((job, index) => (
                    <li className="job-item" key={index}>
                        <div className="job-title">{job.jobNm}</div>
                        <div className="job-detail">Company: {job.busplaName}</div>
                        <div className="job-detail">Contact: {job.cntctNo}</div>
                        <div className="job-detail">Address: {job.compAddr}</div>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default Job;

 

하나하나 살펴보자

useState

    const [jobList, setJobList] = useState([]); 
    const [region, setRegion] = useState("서울특별시"); 
    const [page, setPage] = useState(1);

• useState는 변경될 때마다 페이지를 자동으로 새로고침을 해주는 역할을한다.
  • jobList는 API로 받아오는 데이터이다.
  • region은 지역을 의미하며 셀렉트 박스로 설정할 것이다.
  • page는 검색할 페이지를 의미한다.

useEffect

    useEffect(() => {
        fetchJobs();
    }, [page, region]);

• 해당 메소드는 Effect를 설정하는 것으로 처음 초기화 되었을 때와 변수로 들어온 것들이 갱신 되었을 때 
• 안에 있는 것을 실행한다. 우리는 페이지와 지역이 바뀌면 API를 다시 호출하여 정보를 가져올 것이다.

API 호출 함수

    const fetchJobs = () => {
        axios.get(`/jobs?page=${page}&local=${region}`)
            .then((res) => {
                setJobList(res.data.item);
            })
            .catch((error) => {
                console.error("Error fetching job listings:", error);
            });
    };

• axios를 이용한 통신 방법이다. 

변경 함수

    const handleRegionChange = (event) => {
        setRegion(event.target.value);
        setPage(1);
    };

    const handlePageChange = () => {
        setPage(page + 1);
    };

• 버튼을 누르거나 지역을 선택하면 호출되는 이벤트 들이다. 

리턴 HTML

    return (
        <div className="job-board-container">
            <select className="select-region" value={region} onChange={handleRegionChange}>
                <option value="">All Regions</option>
                <option value="서울특별시">서울특별시</option>
                <option value="경기도">경기도</option>
            </select>
            <button className="load-more-button" onClick={handlePageChange}>Load More</button>

            <ul className="job-list">
                {jobList.map((job, index) => (
                    <li className="job-item" key={index}>
                        <div className="job-title">{job.jobNm}</div>
                        <div className="job-detail">Company: {job.busplaName}</div>
                        <div className="job-detail">Contact: {job.cntctNo}</div>
                        <div className="job-detail">Address: {job.compAddr}</div>
                    </li>
                ))}
            </ul>
        </div>
    );