학습목표
•
리액트 Route 문법을 이용하고 사용할 수 있다.
•
axios를 사용하여 API를 호출할 수 있다.
React Router
Routing
•
사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것
•
리액트에 있는 많은 라우팅 관련 라이브러리 중 React Router를 가장 많이 사용
SPA (Single Page Application)
: 새로운 페이지를 로드하지 않고 한 페이지 내에서 필요한 데이터만 가져오는 형태
→ 리액트는 SPA 방식
React Router
•
각각의 URL에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리
•
사용자가 입력한 주소를 감지하는 역할
•
여러 종류의 컴포넌트 제공
◦
BrowserRouter : HTML5를 지원하는 브라우저의 주소 감지
◦
HashRouter : 해시 주소 감지
사용예시
1.
<BrowserRouter> 컴포넌트 사용하기
코드
2.
<Routes>, <Route> 컴포넌트 사용하기
•
<Routes> : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 하나만 렌더링
•
<Route> : path속성에 경로, element속성에 컴포넌트를 넣어줌
◦
여러 라우팅을 매칭하고 싶으면 URL 뒤에 * 사용
◦
“/”로 접근시 메인페이지(Main.js) 보여줌
◦
“/product/상품번호”로 접근시 상품상세페이지(Product.js) 보여줌
3.
<Link> 컴포넌트 사용하기
•
<a> 태그는 클릭시 페이지를 새로 불러오기 때문에 사용하지 X
•
<Link> 컴포넌트는 History API를 통해 브라우저 주소의 경로만 바꿈
<Link to=”경로”>링크명</Link>
JavaScript
복사
코드
4.
정의하지 않은 경로로 접근하는 경우 NotFound 페이지로 이동 처리
코드
5.
URL 파라미터와 쿼리스트링 사용하기
•
URL 파라미터 : 경로에 :를 사용하여 설정
예시) /product/:productId, /product/:productId/:productName
•
쿼리스트링
◦
useLocation
▪
hash : 주소의 #문자열 뒤의 값
▪
pathname : 현재 주소 경로
▪
search : ?를 포함한 쿼리스트링
▪
state : 페이지를 이동시 임의로 넣을 수 있는 상태 값
▪
key : location 객체의 고유값, 페이지 변경될 때마다 생성
코드
◦
useSearchParams
코드
f.
useNavigate
•
<Link>를 사용하지 않고 다른 페이지로 이동해야하는 경우, 뒤로가기에 사용
•
replace 옵션 : 페이지를 이동할 때 히스토리를 남기지 않음
코드
API 호출
API
: Application Programming Interface
•
응용 프로그램에서 사용할 수 있도록,
운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
UI (User Interface)
: 어떤 사물(스마트폰, 컴퓨터, 인터넷 등)과 사용자 사이를 이어주는 다리 역할
ex) 스마트폰의 홈 버튼, 전원 버튼
•
비유적 표현
1.
손님(내가 만드는 프로그램)이 자리에 앉아 웨이터(API)에게 주문을 한다.
2.
웨이터가 내 주문 내역을 주방(API 제공자, 공공포탈 등)에 갖다준다.
3.
웨이터가 주방에서 요리를 받아 나에게 음식을 가져다준다.
→ API의 장점 : API가 갖다주는 걸 구현할 필요 없이 사용만 하면 됨
•
API 문서
◦
private API은 API 제공자가 API를 공개하지 않음
◦
사용법을 알려주지 않아 쓸 수 없음
→ API 문서가 바로 이 사용법과 규격을 제공하는 문서
ajax
: Asynchronous JavaScript And XML
•
JQuery와 함께 사용됨
•
promise 기반이 아니고, JQuery를 사용하지 않으면 쉽게 구현하기 어려움
fetch
•
promise 기반으로 만들어짐
•
내장 라이브러리임 - 별도의 모듈 설치 필요 X
◦
안정적이지 않은 프레임워크에서 유용하게 사용
//fetch
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error));
JavaScript
복사
•
브라우저 호환성이 떨어지도, 기능적인 부분이 상대적으로 부족함
◦
response timeout 처리 방법이 없음
axios
•
서버와 소통하는 과정
1.
서버에 요청을 보내고 (request)
2.
서버로부터 응답이 오면 (response) 제대로 응답이 왔을 때와 못 왔을 때를 구분하려 처리
•
응답이 오기까지 시간이 걸리므로 서버에 보내는 요청은 비동기 처리
◦
이후에 응답을 바탕으로 처리하는 과정은 .then이나 await 이용
•
같이 보내는 정보들
◦
어떤 메소드를 사용할 것인지 (method)
◦
url 주소 (url)
◦
data (선택)
◦
params (선택)
axios({
//request
method: "get",
url: "url",
responseType: "type"
}).then(function (response) {
// response Action
});
JavaScript
복사
•
Axios를 사용하는 이유
◦
요청 객체에 url이 있음
◦
data 속성 사용
▪
data는 object를 포함
◦
status가 200이고 statusText가 ‘OK’면 성공
◦
자동으로 JSON 데이터 형식으로 변환
◦
요청을 취소하거나 response timeout 걸 수 있음
◦
HTTP 요청 가로챌 수 있음 (인터셉트)
◦
download 진행에 대한 기본적인 지원
◦
브라우저 호환성 good (크로스 브라우징)
Axios Request Methods
GET
•
서버에서 어떤 데이터를 가져와서 보여줌
axios.get(url[,config])
JavaScript
복사
1.
단순 데이터 요청을 수행하는 경우
→ url만 파라미터로 넘김
코드
2.
사용자 번호에 따라 다른 데이터를 불러오는 경우
→ url과 함께 params:{} 객체도 파라미터로 넘김
코드
POST
•
서버로 데이터를 보냄
axios.post(url, data[,config])
JavaScript
복사
•
보내고자 하는 데이터를 message body에 포함시켜 보냄
코드
PUT
•
데이터베이스 내부 내용 갱신
axios.put(url,data[,config])
JavaScript
복사
•
POST 메소드와 비슷한 형식
코드
DELETE
•
데이터베이스 내부 내용 삭제
axios.delete(url[,config])
JavaScript
복사
1.
일반적으인 DELETE
→ body가 비어있는 형태
코드
2.
헤더에 정보가 많이 포함된 경우
→ 두번째 인자에 data 추가해줌
async function deleteData() {
try {
//응답 성공
const response = await axios.delete('url주소',{
//헤더에 포함된 정보들
data:{
post_id: 1,
comment_id: 13,
username: "foo"
}
});
console.log(response);
} catch (error) {
//응답 실패
console.error(error);
}
}
JavaScript
복사
비동기 처리
•
동기와 비동기로 작성한 코드의 가장 큰 차이점은 ..
→ 런타임 시 발생하는 지연시간
•
동기적으로 작업하면 코드 파악이 쉬워지고 유지보수나 디버깅 쉬워짐
◦
but 자바스크립트는 싱글스레드 방식이어서 문제 발생
자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다.
비동기 사례
•
AJAX : 비동기방식의 통신기법
◦
서버와 브라우저가 비동기 방식으로 XML 데이터 교환
◦
전체 페이지를 새로 고치지 않고 페이지 일부만을 위한 데이터 로드
코드
•
setTimeout() : web API의 한 종류
코드
비동기 해결
•
Callback (콜백함수)
◦
호출방식에 의한 구분
◦
콜백함수가 실행됐다는 것으로 요청한 작업이 끝났음을 알림
◦
문제점: 순차적 실행이 필요한 경우 중첩시켜 표현
→ 에러 or 예외 처리 어려움, 콜백지옥
•
Promise
◦
비동기를 간편하게 처리할 수 있도록 도와주는 객체
◦
성공과 실패를 분리해서 메서드 수행
•
Axios
◦
node.js와 브라우저를 위한 Promise 기반의 HTTP통신 라이브러리
▪
response 데이터 다루기 쉬움
코드
•
Fetch
◦
서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 메서드
◦
XMLHttpRequest와 비슷하지만 Promise 기반
▪
XMLHttpRequest : 웹 페이지 전부 로딩하지 않고도 일부만 갱신 가능
코드
참고자료
React Router
API 호출
비동기 처리
