[리액트] 백엔드 API 호출 (feat. Get 요청)

프론트엔드와 백엔드를 모두 구현하는 풀스택 프로젝트를 진행하며 기초 학습을 하고 있습니다.

이전까지는 UI 구현에만 집중했고 이제 백엔드와의 연동 작업을 시작하려고 합니다.

 

HTTP 요청 처리를 위해 Fetch와 Axios 중 둘의 특징을 비교한 결과 Axios를 통해 개발하기로 결정했습니다.

 

Axios를 선택한 이유는 다음과 같습니다. 

1. 자동 직렬화 및 에러 처리

• JSON 데이터 자동 변환 및 자동 에러 처리로 코드 길이를 단축할 수 있습니다. 

2. 다양한 기능 지원

• 요청 타임아웃 설정이 가능합니다. 
• 요청/응답 인터셉터를 통해 요청 전 후로 작업 처리를 제어할 수 있습니다. 

3. 학습 단계에 적합

• 설치만 한다면 복잡한 설정 없이도 바로 사용 가능합니다.
• 이미 구현된 자동화 기능을 통해 실수를 줄일 수 있습니다. 

Fetch vs Axios 상세 비교

자세한 비교는 아래 포스팅에서 확인할 수 있습니다.

[리액트] fetch와 axios 차이

 

---

Get 요청 보내기 

아래 그림과 같이, 백엔드에서 진료과 정보를 받아오는 API를 호출하여 화면에 표시하는 것이 목표였습니다.

응답 데이터를 통해 진료과와 아이콘을 띄운 상황

 

 

• 데이터는 페이지가 표시되는 동안 유지되어야 하기 때문에 useEffect를 사용하여 컴포넌트가 외부 시스템과 동기화되도록 하였습니다.
• API 응답으로 받은 데이터를 state에 저장하여, 데이터가 추가되더라도 별도의 추가 작업 없이 동적으로 UI에 반영되도록 구현하였습니다.

function getDepartments() {
    const [departments, setDepartments] = useState([]);
    const token = "토큰 값"
    useEffect(() => {
        //요청 보내는 부분
        axios.get(
            "http://localhost:8080/api/clinics/departments", {
            headers: {
                "Authorization": `Bearer ${token}`,
            }
        }
        )
        .then((res) => 
             setDepartments(res.data.departments) //응답 데이터를 departments에 저장 
        )
        .catch(err => console.log(err));
    }, []);
    
    return departments;
 }

 

⚠️ axios.get(, [ ]) [ ]를 넣는 이유

[ ]를 넣을 경우 컴포넌트가 처음 화면에 표시되는 경우에만 실행하겠다는 의미가 됩니다. 

[ ]를 넣지 않으면 axios 요청이 렌더링 될 때마다 실행되어 중복이 발생합니다.  

 

➡️ 외부 API에서 데이터를 가져와 초기화 상태로 세팅하는 경우에는 빈 배열을 넣어 불필요한 반복 요청을 막을 수 있습니다. 

 

진료과 표시 부분 코드

<div
  className="shadow-md rounded-lg p-10 flex gap-10 justify-center w-full overflow-x-auto scrollbar-hide"
>
  {getDepartments().map((department, index) => (
    <DepartmentIcon
      key={index}
      name={department.name}
      imageUrl={department.icon}
    />
  ))}
</div>

 

DepartmentIcon 컴포넌트

function DepartmentIcon({ imageUrl, name }) {
    return (
        <div className="text-center bg-gray-200 px-10 py-7 rounded-lg shadow">
            <img
                src={imageUrl}
            />
            <p className="font-bold">{name}</p>
        </div>
    );
}

 

📚 참고 자료

useEffect 공식 문서를 참고하였습니다. 

useEffect – React

 

 useState는 Repository에 정리하였습니다. (useEffect도 정리 예정입니다.) 

GitHub - jiwonclvl/practice-javascript: JavaScript 문법과 React의 주요 개념들을 실습하며 익히기 위한 연습