[2025 1학기 React.js 스터디] 이가인 #6주차

React 프로젝트 - API 연동 & 라우팅 기초 실습 목차

1. API 연동
2. useState와 useEffect로 요청에 대한 상태 관리
3. 라우팅이란?
4. 리액트 라우터 적용 및 기본 사용법 (1~13)
   1. 프로젝트 생성 및 라우터 설치
   2. React 18 이상에서 라우터 적용 (index.js)
   3. 페이지 컴포넌트 만들기 (pages 폴더)
   4. App.js에서 라우트 설정 (Route & Routes)
   5. Link 컴포넌트로 페이지 이동
   6. URL 파라미터 (useParams)
   7. 쿼리스트링 처리 (useSearchParams)
   8. 중첩 라우트 (Outlet)
   9. 공통 레이아웃 구성 (Header + Outlet)
   10. useNavigate로 코드에서 페이지 이동
   11. NavLink로 현재 경로 스타일 적용
   12. NotFound 페이지 구성 (와일드카드 )
   13. Navigate로 로그인 안된 사용자 리다이렉트

---

 

1. API 연동

API 호출하려면 axios 라는 라이브러리를 설치해야함 

 

<REST API >

= Representational State Transfer

= 웹에서 자원을 쉽게 주고받을 수 있도록 만들어진 규칙

= 자원 (URL) + 행위 (HTTP METHOD) + 표현 

 

1. URL으로 정보의 자원을 표현해야함 

2. 자원에 대한 행위는 HTTP Method ( GET, POST, PUT, DELETE) 로 표현 

 

HTTP METHOD의 역할 -> REST한 API를 설계하는게 중심 규칙이다. 

GET	자원 조회	/users → 모든 사용자 정보 가져오기
POST	자원 생성	/users → 새 사용자 추가
PUT	자원 전체 수정	/users/1 → ID가 1인 사용자 정보 전체 변경
DELETE	자원 삭제	/users/1 → ID가 1인 사용자 삭제

 

<사용법>

import axios from 'axios';

axios.get('/users/1');

axios.post('/users', {
  username: 'blabla',
  name: 'blabla'
});

post로 데이터 등록할 때 :

두번째 파라미터에 등록하고자 하는 정보 넣기 

 

2. useState와 useEffect로 요청에 대한 상태 관리 

• useState : 요청 상태를 관리
  • 요청의 결과
  • 로딩 상태
  • 에러

• useEffect : 컴포넌트가 렌더링되는 시점에 요청을 시작

api 글자 한개라도 틀리면 이렇게 에러가 뜹니다...

 

3. 라우팅

웹에서 라우팅이란?

- 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미

- 웹을 만들 때 프로젝트를 여러 페이지로 구성할 수 있음 

-  페이지는 또 컴포넌트들로 구성됨 --> 이를 관리하는 것이 라우팅 시스템

 

이를 구축하기 위해 1. 리액트 라우터 : 가장 오래됏고 가장 많이 사용됨 ➡️ 컴포넌트 기반 라우팅2. Next.js :  리액트 프로젝트의 프레임워크 ➡️ 파일 경로 기반 라우팅 

 

싱글 페이지 애플리케이션이 생기기전엔, 여러 페이지에서 이동할때 그때마다 페이지의 새로운 html, css,js,이미지 등을 전달받아서 이동되는 방식이엇음 -> 너무 양이 많아지고 비효율적 ➡️ 그래서, 사용자와의 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 어베이트하는 방식을 사용하게 되었음. ex) 새로운 데이터가 필요하면 서버 API 호출하여 필요한 데이터만 새로 불러와서 사용   ➡️ html은 한번만 받아와서 실행    ➡️ 브라우저의 History API 사용하여 브라우저의 주소창의 값만 변경, 웹 애플리케이션은 그대로 유지 

 

 

4. 리액트 라우터 적용 및 기본 사용법 (1~13)

 

 

 

---

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

$ npm create react-app router-tutorial 
$ cd router-tutorial
$ npm add react-router-dom //라이브러리 설치

 

yarn 명령어 없다고 뜨면 npm으로 하기

 

 

 

---

2. index.js에 라우터 적용

ReactDOM.render(...) → ✅ React 17 이하에서 사용됨 

-> React 18이상은 렌더링 안됨

ReactDOM.createRoot(...).render(...) → ✅ React 18 이상에서 사용 

 

 

 

---

3. 페이지 컴포넌트 만들기 

이런식으로 src 하위에 pages 경로를 만들고 페이지 컴포넌들을 추가한다. 

 

 

---

4. App.js에 라우트로 컴포넌트 보여주는 법

이런식으로

Route 컴포넌트는 Routes 컴포넌트 내부에서 사용되어야 함

 

 

 

---

5. 링크로 다른 페이지로 이동하기 

 

웹 페이지에서 링크 보여줄땐 a 태그 사용 but

💥리액트 라우터를 사용할 때는 안됨 !! -> 페이지를 새로 불러오게 때문에

ㄴ 새로 불러오는거 말고 History API 통해 주소 경로만 바꾸는 기능이 내장되어 있음 !!

  ➡️바로 Link 컴포넌트 !! 

 

Home.js

 

 

 

 

---

6. URL 파라미터로 조회하는 방법

URL 파라미터 :  ID또는 이름을 사용하여 특정 데이터를 조회할때 사용 

ㄴ ex)  /profile/velopert

 

URL 파라미터는 useParams 이라는 hook을 사용하여 객체 형태로 조회 

 

Profile.js

username URL 파라미터를 통하여 프로필을 조회한 뒤에 프로필이 존재하지 않으면 ‘존재하지 않는 프로필입니다.’ 라는 문구를 보여주고 존재한다면 프로필 정보를 보여주는 로직

 

App.js

/profiles/:username 

이런식으로 경로에 : 를 사용하여 설정

 

⁉️파라미터가 여러개면?

/profiles/:username/:field 이런식으로 

Home.js

 

 

 

---

7. 쿼리스트링 사용하기 

쿼리 스트링은 주소의 뒷부분에 ? 문자열 이후에 key=value 로 값을 정의하며 & 로 구분을 하는 형태

ㄴ ex) /articles?**page=1&keyword=react

 

➡️ 쿼리스트링(Querystring)은 키워드 검색, 페이지네이션, 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용

➡️ useLocation이라는 hook 사용하여 location 객체 반환,   location.search  값을 통해 조회할 수 있음

    

➡️ 리액트 라우터에서는 v6부터 useSearchParams 라는 Hook을 통해서 쿼리스트링을 조회할 수 있음

  - get(조회) , set(업데이트) 로 특정 파라미터 확인 할 수 있음, 존재x 면 null로 조회됨 

 

💥주의할 점

- 쿼리 파라미터를 조회할 때 값은 무조건 문자열 타입임 !!

- boolean 값을 넣는다면 값을 비교할 때 꼭 'true'와 같이 따옴표로 감싸서 비교를 해야한다

- 숫자를 다룬다면 parseint를 사용해 숫자 타입으로 변환을 해야한다. 

 

 

---

8. 중첩된 라우트 

- 게시글 목록 + 게시글 읽는 페이지 

 

순서대로 Articles.js이고 저 링크를 클릭하면 Articles.js가 나옴

 

🌟그런데, Articles페이지에서 Articles를 열였을때 게시글 하단에 Articles페이지의 목록을 보여주고 싶을 때 !! 

 --> 페이지가 중첩됨

 

이렇게 <Route articles>안에 또 다른 <Route>에 Article을 넣습니당

 

그 다음 Aricles.js를 수정해주세요 

리액트 라우터에서 제공하는 Outlet이라는 함수를 사용합니다 

  --> 얘는 Route의 children으로 들어가는 JSX 엘리먼트를 보여주는 역할을 한다네요 오..

 

 

저 Outlet 컴포넌트는 App.js의 

<Route path=":id" element={<Article />} />

를 보여줍니다 ! (중첩된 라우트)

 

articles/1 경로에 들어가보면 

요렇게 밑에 Article 컴포넌트를 잘 보여줍니다!

 

 

---

9. 공통으로 보여줘야하는 레이아웃이 있을 때 

 

도!! Outlet을 사용할 수 있습니당 

ex) 페이지의 헤더

 

이렇게 src 하위에 Header.js를 만들어주고

이런식으로 App.js에 Header아래오 Route를 넣어주면 ~

요렇게 나옵니다

근데 Articles는 하위Route에 있지 않기 때문에 게시글 목록 링크에 들어갔을 때는 Header가 보이지 않는다는점!!

 

 

 

---

10. useNavigate ➡️페이지 이동

 

이거는 Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 할 때 사용하는 Hook 입니닷

Header.js이렇게 버튼을 만들어 페이지 이동을 하게 하게 수정을 해봅시다

navigate를 정의하고 각각 버튼에 대해 화살표 함수를 만들어준뒤 

navigate() 이 파라미터 안에 이동할 경로나 -1, -2, 1 2 (뒤로 1,2번 앞으로 1,2번 이동) 을 써주면 됩니당

 

⁉️현재 페이지를 페이지 기록에 남기지 않는 것 ?

 replace 옵션 !

const goArticles = () => {
  navigate('/articles', { replace: true });
}

이런식으로 <게시글 목록> 버튼 함수에 { replace : true }를 추가해줍니당 

Home -> About -> 뒤로가기 -> Home 

이런 식으로 됩니다 !! 

About에서 버튼을 클릭했기때문에 그 페이지인 About은 페이지 기록에 남지 않습니다~~

 

---

11. NavLink ➡️ Link의 기능 + 현재 페이지 활성화 보여줌

 

일반적인 <Link>와 거의 동일한 역할을 하지만 활성화된 링크(active 상태)를 구별할 수 있는 기능이 추가된 버전!!

<NavLink 
	to = "경로"
  style={({isActive}) => isActive ? activeStyle : undefined} 
/>

Articles.js

이렇게 현재 페이지의 활성화 상태를 style로 보여줍니다 오~~ 

 

 

---

12. Notfound 페이지 만들기 ➡️정의되지않는 경로에 진입했을때 보여주는 페이지 

 

일반페이지처럼 pages 하위에 NotFound.js를 만들어준뒤 

App.js 에 요렇게 추가해줍니다. 

여기서 * 는 wildcard 문자라고합니다

이거는 element 상단에 위치하는 라우트들의 규칙을 모두 확인하고, 일치하는 라우트가 없다면 이 *라우트가 화면에 나타나게되는 원리입니당 

 

없는 경로에 들어가봣을때 /gain

404 ~~ 

근데 왜 404가 NotFound이지

오 ...... 그렇다네요 싱기방기

 

 

 

---

13. Navigate ➡️ 브라우저의 링크 클릭 없이 코드로 페이지 이동 가능

 

ex) 로그인이 필요한 페이지인데, 로그인을 안했다면?

로그인 페이지를 보여줘야하는데 이런 상황에 사용할 수 있어용 

 

MyPage.js와 Login/js를 만들어줍니다

isLoggedIn은 현재 false라는 고정값을 가지고 있지만, 이 값이 로그인 상태에 따라 true 또는 false를 가르킨다고 가정

만약 이 값이 false라면 /login 경로로 이동합니당

 이렇게 /mypage 경로를 입력하면 이렇게 바로 자동으로 페이지가 /login으로 넘어갑니다.

 

 

---

14. 정리 

 

리액트에서 프로젝트가 커지면 모든 컴포넌트를 한 번에 불러와서 초기 로딩이 느려집니다..

이때 코드 스플리팅을 사용하면 필요한 컴포넌트만 그때그때 불러와 성능을 높일 수 있습니다!

 

코드 스플리팅은 필요한 시점에 필요한 코드만 불러오는 기술인데

 

이건 나중에 더 알아보도록 하죠...

 

 

감사합니다아