[2025 1학기 React.js 스터디] 한혜민 #6주차

🐙 API 연동의 기본

 

✅ API를 연동하기 위해서 새프로젝트 생성

✅ API를 호출하기 위해서 axios 라이브러리 설치

 

• REST API 메서드

메서드	의미
GET	데이터 조회
POST	데이터 등록
PUT	데이터 수정
DELETE	데이터 제거

 

• useState와 useEffect로 데이터 로딩하기

useState를 사용하여 요청 상태를 관리하고, useEffect를 사용하여 컴포넌트가 렌더링되는 시점에 요청해보겠음.

 

단, 요청에 대한 상태를 관리할 때

요청의 결과

로딩 상태

에러

관리해줘야함.

 

Users.js

App.js

 

실행 결과

 

===================== 버튼을 눌러서 API 재요청하기 =====================

버튼을 눌러서 API를 재요청하는 기능을 구현해보겠음. 이를 위해서 fetchUsers 함수를 바깥으로 꺼내주고, 버튼을 만들어 해당 함수를 연결해줄 거임.

 

Users.js

 

실행 결과

"다시 불러오기" 버튼이 생겼음 !!!!!

 

 

🐙 React Router v6 튜토리얼

 

💡 라우팅이란?

 

웹 애플리케이션에서 라우팅이란 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미함.

쉽게 말해서 블로그 애플리케이션 구성을 보면 "글쓰기 페이지/ 포스트 목록 페이지/ 포스트 읽기 페이지" 등의 여러 페이지로 구성된 것을 볼 수 있음. 

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

 리액트에서 라우트 시스템을 구축하기 위해 리액트 라우터(React Router)나 Next.js를 사용할 수 있음.

• 리액트 라우터 > 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있음
• Next.js > Create React App처럼 리액트 프로젝트 설정, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능을 제공하는 프레임워크임. 파일 경로 기반으로 작성하고 리액트 라우터 대안으로 많이 사용됨.

근데 자료에서 리액트 라우터를 사용한다니까 나도 리액트 라우터 사용할 거임

 

💡싱글 페이지 애플리케이션이란?

 

한 개의 페이지로 이루어진 애플리케이션임.

아까 분명 리액트 라우터를 사용하면 여러 페이지로 구성된 프로젝트를 만들 수 있다고 했었는데, 싱글 페이지 애플리케이션을 왜 배우는지 이해시키기 위해 멀티 페이지 애플리케이션의 작동 방식부터 살펴보겠음.

 멀티 페이지 애플리케이션에서 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달 받아 브라우저 화면에 보여줬음. 각 페이지마다 다른 html 파일을 만들어서 제공하거나, 데이터에 따라 유동적인 html을 생성해주는 템플릿 엔진을 사용하기도 했음.

 

BUT

사용자 인터랙션이 별로 없는 정적인 페이지들은 위 방식이 ㄱㅊ은데, 사용자 인터랙션이 많고 다양한 정보를 제공해야하는 애플리케이션들은 이 방식이 좋지가 않음. 즉 새로운 페이지를 보여줘야할 때마다 서버 측에서 모든 준비를 해야하는데, 그걸 서버랑 트래픽이 감당하기 어렵기 때문임.

 

그래서 ..!!!

리액트에서는 라이브러리를 사용해서 뷰 렌더링을 사용자 브라우저가 담당하고, 웹 애플리케이션을 브라우저에 불러와 실행시키고 사용자와의 인터랙션이 발생하면 필요한 부분만 js를 사용해서 업데이트하는 방식으로 바꾸게 됨.

즉, 새로운 데이터가 필요하면 서버 API를 호출하여 필요한 데이터만 새로 불러와 애플리케이션에서 사용할 수 있게됐음.

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

 

 

 

💡리액트 라우터 적용 및 기본 사용법

 

✅  프로젝트 생성 및 라이브러리 설치

 

 

리액트 프로젝트를 새로 생성한 후, 해당 프로젝트 디렉터리로 이동하여 리액트 라우터 라이브러리 설치

 

✅  프로젝트에 라우터 적용

 

src/index.js 파일에 react-router-dom에 내장되어있는 BrowserRouter 컴포넌트를 사용해줄 거임.

이 컴포넌트는 웹 애플리케이션에서 페이지를 새로 불러오지않고 주소를 변경하고, 현재 주소의 경로에 관련된 정보를 리액트 컴포넌트에서 사용할 수 있게 해줌.

 

src/index.js

 

라고 자료에는 나와있지만 저렇게 하니까 버전 호환성 문제?가 발생하여 코드 바꿔줬음

 

 

✅  페이지 컴포넌트 만들기

 

리액트 라우터를 통해 여러 페이지로 구성된 웹 애플리케이션을 만들기 위해 각 페이지에서 사용할 컴포넌트를 만들 거임. 사용자가 웹 사이트에 들어오게 됐을 때 가장 먼저 보여지게 될 Home 페이지 컴포넌트와 웹 사이트를 소개하는 About 페이지 컴포넌트를 만들어보겠음 !!

 

src/pages/Home.js

 

 

 

src/pages/About.js

 

 

 

✅  Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기

 

src/App.js

 

 

 

실행 결과

 

yarn start를 입력하여 실행 결과를 확인해보면

 

 

 

✅ Link 컴포넌트를 사용하여 다른 페이지로 이동하는 링크 보여주기

 

src/pages/Home.js

 

 

 

실행 결과

 

 

✅ URL 파라미터와 쿼리스트링

 

URL 파라미터는 주소의 경로에 유동적인 값을 넣는 형태고, 쿼리 스트링은 주소의 뒷부분에 "?" 이후에 key=value로 값을 정의하며 &로 구분함.

• URL 파라미터 예시: /profile/velopert
• 쿼리스트링 예시: /articles?**page=1&keyword=react

 

✅ URL 파라미터

 

src/pages/Profile.js

 

 

 

src/App.js

 

 

 

src/pages/Home.js

 

 

 

 

실행 결과

 

 

 

✅ 쿼리스트링

 

src/pages/About.js

 

 

위 컴포넌트에서 useLocation 이라는 Hook을 사용했음. 이 Hook은 location 객체를 반환하며 이 객체는 현재 사용자가 보고있는 페이지의 정보를 가짐.

location 객체에는 다음과 같은 값이 있음

pathname	현재 주소의 경로 (쿼리스트링 제외)
search	맨 앞의 ? 문자 포함한 쿼리스트링 값
hash	주소의 # 문자열 뒤의 값
state	페이지로 이동할때 임의로 넣을 수 있는 상태 값
key	location 객체의 고유 값, 초기에는 default 이며 페이지가 변경될때마다 고유의 값이 생성됨

 

 

 

✅ 중첩된 라우트

 

src/pages/Articles.js

 

 

src/pages/Articles.js

 

 

src/App.js

 

 

src/pages/Home.js

 

 

 

실행 결과

 

 

 

✅ 공통 레이아웃 컴포넌트

 

이번에는 중첩된 라우트를 통해 공통 레이웃 컴포넌트를 사용해보겠음

 

src/Layout.js

 

 

src/App.js

 

 

 

실행 결과

 

 

Header가 잘나타난 걸 볼 수 있음 !!

 

 

 

💡리액트 라우터 부가기능

 

이제부터는 리액트 라우터에서 라우팅 관련된 작업을 할 때 사용할 수 있는 유용한 API들을 살펴보겠음

 

✅ useNavigate

 

Link 컴포넌트를 사용하지 않고 다른 페이지로 이동할 수 있음

 

src/Layout.js

 

 

 

실행 결과

 

헤더에 버튼 두개가 만들어진 것을 볼 수 있음

 

 

✅ NavLink

 

링크에서 사용하는 경로가 현재 라우트 경로와 일치하는 경우 특정 스타일 또는 CSS 클래스를 적용하는 컴포넌트임

 

src/pages/Articles.js

 

 

 

실행 결과

 

 

"게시글1"이 크기가 더 커지고 색도 초록색으로 바뀐 걸 볼 수 있음 !

 

 

✅ NotFound 페이지 만들기

 

 

NotFound 페이지는 사전에 정의되지 않는 경로에 사용자가 진입했을 때 보여주는 페이지임.

 

 

src/pages/NotFound.js

 

 

 

src/App.js

 

 

 

 

✅ Navigate 컴포넌트

 

Navigate 컴포넌트는 컴포넌트를 화면에 보여주는 순간 다른 페이지로 이동을 하고 싶을 때 사용하는 컴포넌트임.

우선 사용자의 로그인이 필요한 페이지이므로 로그인 페이지부터 보여주겠음.

 

src/pages/Login.js

 

 

 

src/pages/MyPage.js

 

 

 

src/App.js

 

 

 

 

실행 결과

 

 

/mypage 로 이동하면 바로 로그인 페이지로 들어가지는 것을 볼 수 있음

 

 

 

 

🐙 정리

 

내가 입력하는 코드에 따라 웹 페이지 화면이 다양하게 바뀌는게 재밌었음

 

 

 

 

끝