[2025 1학기 React.js 스터디] 강민지 #6주차
1. API 연동
API 연동하면 좋은 점 ?
=> 내가 데이터를 만들지 않아도 다른 서버에 이미 있는 API를 가져다 쓸 수 있음 !
먼저, API를 호출하기 위해서는 axios 라이브러리를 설치해야한다
데이터를 관리하는 메서드로는,
● GET: 데이터 정보 조회
● POST: 데이터 등록
● PUT: 데이터 수정
● DELETE: 데이터 제거
++
PATCH(데이터 부분 수정) , HEAD(데이터 상태 조회) 가 있다.
axios 사용법
: axios.메서드()
EX)
axios.post('/users', {
username: 'minji',
name: 'minji'
});
useState 와 useEffect 로 데이터 로딩하기 (실습)
- useState : API에서 받은 데이터 저장 or 로딩 중 표시
-useEffect : 컴포넌트가 나타날 때 요청하는 작업
버튼 만들기 + API 재요청하기
const fetchUsers = async () => {
// 코드 수정 -> fetchUsers 함수 바깥으로 꺼내기
<button onClick={fetchUsers}>다시 불러오기</button>
// 코드 추가 -> 버튼 만들기2. 라우팅
: 사용자가 어떤 페이지를 요청했을 때, 그 페이지를 찾아서 보여주고 관리하는 역할을 한다.
싱글 페이지 애플리케이션이란
처음에만 한 번 html을 받아오고, 이후엔 필요한 데이터만 JS로 업데이트해서 다른 페이지를 보여주는 앱
(( 멀티 페이지 애플리케이션은
페이지 바뀔 때마다 새로고침 + 매번 html을 받아오는 구조))
3. 리액트 라우터 (실습)
# 3-1. 먼저, 기본 세팅 !
# 3-2. **라우터 적용**
● BrowserRouter 컴포넌트로 감싸기 -> 앱 전체에 라우팅 기능
● 내부적으로 History API 사용 -> 새로고침 없이 URL만 바꿔줌
# 3-3. Route 컴포넌트 사용
: 어떤 페이지를 보여줄지 ?
# 3-4. Link 컴포넌트 사용
: 다른 페이지로 이동 , 새로고침 X
❗그런데 오류가 발생함 ❗
지삐띠에게 물어보니 React 18 이상에서는 ReactDOM.render()를 더 이상 쓰지 않는다고 한다
->> ReactDOM.createRoot()으로 바꿔줍시다
해결완 (주석까지 출력됨 ㅎㅎㅎ이것머에요 ¿)
4. URL 파라미터 & 쿼리스트링
# 4-1. URL 파라미터
: 특정 데이터 조회할 때 사용
경로에 : 를 사용하여 설정
- useParams -> 객체 형태로 조회 가능
# 4-2. 쿼리스트링
: 데이터 조회에 필요한 옵션 전달
- useSearchParams : 쿼리스트링(예: ?page=2&detail=true)을 읽고, 수정할 수 있는 방법
** 조회할 때 값은 항상 "문자열" 타입,
숫자처럼 쓰려면 parseInt() 사용
5. 중첩된 라우트
게시글의 하단에 목록을 보여주고 싶을 때 ?
따로 컴포넌트 만들기 X
중첩된 라우트를 사용하면 편하다
- Outlet 컴포넌트 사용 -> Outlet 컴포넌트가 사용된 자리에 중첩된 라우트가 보여지게됨
공통 레이아웃 컴포넌트 사용할 때도 유용
++
Route 컴포넌트에 있는 index 라는 props는
path="/"와 동일
6. 라우팅 작업할 때 유용한 API들
: Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야 할 때
페이지를 이동할 때 현재 페이지를 페이지 기록에 남기지 않으려면
replace 옵션 사용
const goArticles = () => {
navigate('/articles', { replace: true });
}
: 페이지 이동 + 현재 선택된 메뉴 표시
# 6.3 NotFound 페이지 만들기
여기서 * 는 wildcard 문자로,
아무 주소에도 매칭된다는 의미
# 6.4 Navigate 컴포넌트
: 페이지를 리다이렉트 하고 싶을 때 사용
ex) 사용자의 로그인이 필요한 페이지인데 로그인을 안했다면 로그인 페이지를 보여줌
만약 isLoggedIn 값이 false 라면 Navigate 컴포넌트를 통해 /login 경로로 이동함
끝 -
