인프런 커뮤니티 질문&답변

프론트는 react이고 백엔드는 스프링 부트입니다 .



리액트 소스입니다 .

import "./App.css";
import { useState, useEffect } from "react";

import SERVER_URL from "./config/config";

function App() {
  const [hello, setHello] = useState([]);
  useEffect(() => {
    if (!hello.length) {
      console.log(`서버주소는 ::::::::::::::${SERVER_URL}`);
      fetch(`${SERVER_URL}/api/headers`)
        .then((response) => response.json())
        .then((data) => {
          console.log("데이터:::::::::::", data); // 데이터 출력
          setHello(data); // 데이터를 상태에 설정
        })
        .catch((error) => console.log("Error:", error));
    }
  }, []);
  return (
    <div className="App">
      <div>백엔드에서 가져온 데이터입니다</div>
      <ul>
        {hello.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

config.js 소스입니다.

const SERVER_URL = "http://localhost:8080";
export default SERVER_URL;

백단입니다.

package com.service.com.controll;

import java.util.HashMap;
import java.util.List;

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import com.service.com.domain.User;
import com.service.com.service.MainService;

import lombok.RequiredArgsConstructor;

@RequiredArgsConstructor
@RestController
public class MainController {

	private final MainService mainService;

	@GetMapping("/api/headers")
	public ResponseEntity<List<User>> getHeaders() {
		List<User> headerList = mainService.findAll();
 		System.out.println(headerList.toString().toString());
 		return ResponseEntity.status(HttpStatus.CREATED).body(headerList);
	}

}

백단 로그입니다 .
[User(id=1, name=a), User(id=2, name=b), User(id=3, name=c), User(id=4, name=d), User(id=5, name=e)]

궁금한 질문입니다 .

서버주소는 ::::::::::::::http://localhost:8080

서버주소는 ::::::::::::::http://localhost:8080

데이터::::::::::: (5) [{…}, {…}, {…}, {…}, {…}]

데이터::::::::::: (5) [{…}, {…}, {…}, {…}, {…}]
왜 2번씩 둘다 찍히는걸까요 ..빈배열 넣었고 처음에만 작동하라고 hello배열의 길이가 없을떄?? useEffect가 작동하라고 코딩했는데 ..궁금합니다.