[2025 겨울방학 React.js 스터디] 박현빈 # 4주차

API(application programming interface, 애플리케이션 프로그래밍 인터페이스)

컴퓨나 컴퓨터 프로그램 사이의 연결을 의미한다. 소프트웨어 애플리케이션 사이의 소통 및 상호작용을 위해 정의된 규약이나 프로토콜을 의미한다. API는 다양한 형태로 존재할 수 있으며 주로 웹서비스, 운영체제, 라이브러리, 또는 다른 소프트웨어에 대한 접근 방법으로 사용된다. API를 활용하면 다음 효과를 얻을 수 있다. 

 

1. 데이터 교환 : 다른 소프트웨어와 데이터를 교환할 수 있는 방법을 제공한다. API를 제공하는 프로그램에 API로 연결하면 데이터를 공유, 처리 또는 조작할 수 있다. 송금 서비스 앱인 토스는 데이터 교환 API를 이용하여 한 개인의 계좌 및 카드 내역 ㅈㅇ보를 앱 내에서 확인할 수 있게 한다. 

2. 다른 소프트웨어의 기능 실행 : 다른 소프트웨어의 기능을 호출하고 실행할 수 있는 방법을 제공한다. 이를 활용하여 애플리케이션은 다른 애플리케이션의 기능을 활용하여 복잡한 작업을 간편하게 수행할 수 있다. 결제가 필요한 애플리케이션에서 카카오페이, 네이버페이 및 PG사의 결제 서비스의 API를 활용하여 결제 시스템을 구축한 사례를 많이 볼 수 있다. 

 

3.서비스 접근 : 웹 서비스나 클라우드 서비스에 접근할 수 있는 방법을 제공한다. 이를 통해 개발자는 다양한 서비스를 사용하여 애플리케이션 기능을 간편하게 확장할 수 있도, 성능을 개선할 수 있다. 클라우드 서비스의 시작 점유율이 가장 높은 AWS는 API로 제공하는 서비스를 액세스할 수 있게 제공하고 있다. 개발자는 AWS API를 이용하여 애플리케이션 서버의 성능을 조절하거나, 데이터 분석 솔루션을 적용하는 등의 작업을 간편하게 할 수 있다. 

 

React에서의 API

react에서 API를 사용하기 위해서는 axios 라이브러리를 사용해야 한다. 

$ cd api-integrate
$ yarn add axios

 

---

라우팅이란

사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 웹 애플리케이션을 만들때 프로젝트를 하나의 페이지로 구성할 수도 있고, 여러 페이지로 구성할 수도 있다. 

 

여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템이다. 

 

리액트에서 라우트 시스템을 구축하기 위해서 사용할 수 있는 선택지는 크게 두가지로 React Router 라이브러리와 Next.js 프레임워크가 있다. 라우팀 관련 기능은 리액트 라이브러리에서 공싱적으로 지원하는 것이 아니라 써드 파티로서 제공된다. 

리액트 라우터(React Router)를 사용하면 손쉽게 싱글 페이지 애플리케이션을 만들 수 있다. 

싱글 페이지 애플리 케이션 

한 개의 페이지로 이루어진 애플리케이션을 의미 한다. 리액트 라우터를 사용하여 여러 페이지로 구성된 프로젝트를 만들 수 있다고 했는데 왜 싱글 페이지 애플리케이션이라고 불리는지 의문이 들 수 있다. 

 

이를 이해하기 위해서는, 싱글 페이지 애플리케이션이란 개념이 생기기 전에 사용되던 멀티 페이지 애플리케이션은 어떻게 동작하는지 살펴볼 필요가 있다. 

 

기존 멀티 페이지 애플리케이션에서는 사용자가 페이지를 이동할 때마라다 서버에서 새로운 html, CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여 줬다. 사용자와의 상호작용이 적은 페이진 경우에는 크게 상관이 없지만, 상호작용이 많은 경우에 서버측에 페이지를 보여주기 위해서 서버의 자원을 많이 사용한다. 

 

그래서, 리액트 같은 라이브러리를 사용하여 뷰 렌더링을 사용자의 브라우저가 담당하도록하고, 우선 웹 애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트하는 방식을 사용했다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있게 됐다.

 

이렇게 html은 한번만 받아와서 웹 애플리케이션을 실행시킨 후에 그 이후에는 필요한 데이터만 받아와서 화면에 업데이트 해주는 것이 싱글 페이지 애플리케이션입니다.