뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, Build A Pokémon Application With React - Tutorial
서원석님의 학습노트

[React ] 포켓몬 정보를 불러오는 리스트 구현하기

#전체
#개발자
#프론트엔드
#webdevsimplified
#react tutorial
#react application
#react application tutorial
#react pokemon
#javascript react
#react js
#react web app
#js pokemon
#javascript pokemon
#pokemon web app
#react js app
#react javascript app
#react js application
#react javascript application
#react js tutorial
#react javascript tutorial
#react hooks
#react hooks tutorial
#react usestate
#react useeffect
#react useeffect tutorial
#react js hooks
#react axios
#react ajax
#react fetch
#react
#1년차
00:43시작(여기부터 영상을 시청해주세요)
01:47코드 작성 준비 완료
02:29사용할 pokeAPI 소개
03:33PokemonList.js 파일 생성
04:06Pagination.js 파일 생성
04:22useState 작성 시작
05:13pokemon을 state로 관리
05:51pokemon에 default value 입력
06:18PokemonList import
06:30App에서 PokemonList 컴포넌트에 prop으로 pokemon전달
06:44PokemonList에서 전달받은 pokemon에 대해 화면에 뿌려주기 위한 코드 작성
07:58p는 string이며 중복이 안되므로 key에 사용가능
08:09정상적으로 화면에 출력 중(default value pokemon)
08:37fetch용 라이브러리인 axios npm으로 설치
09:08axios로 pokemon api 호출
10:26api로 부터 받아온 데이터를 pokemon에 넣으니 화면에 잘 나옵니다.
10:43useEffect 작성 시작
11:28axios를 활용한 fetch함수를 useEffect의 side effect 함수로 사용합니다.
12:04이전 페이지, 다음 페이지의 포켓몬 목록을 가지고 오기 위해 현재페이지URL, 이전 페이지URL, 다음 페이지URL을 state로 등록합니다.
12:46currentURL이 바뀌면 다시 fetch 하도록 useEffect의 의존성 배열과 사이드 이펙트 함수의 내부를 수정합니다.
13:52nextPageUrl, prevPageUrl을 useEffect 내의 fetch 안에서 갱신합니다. (api가 해당 정보를 가지고 있어서 response에 들어있음)
14:35loading을 표시하기 위해 state 등록
15:09loading은 처음엔 true였다가 fetch가 끝나면 false로 바뀝니다. useEffect가 side effect를 다시 호출할 때를 고려해서 useEffect의 effect함수 시작마다 loading을 true로 바꿉니다.
15:21loading을 위한 UI 작성
17:50useEffect의 clean up function과 axios의 cancelToken을 활용해서 fetch request가 진행 중인 상황에서 새로운 fetch request가 시작되려하면 이전 fetch request를 취소하는 로직을 구현합니다.
17:50pagination을 구현합니다.
18:04goToNextPage함수 구현
18:31Pagination 컴포넌트를 App 컴포넌트에서 호출하고 props로 goToNextPage, goToPrevPage 전달
19:54Pagination 컴포넌트에선 전달받은 두 함수를 각 버튼의 onClick 이벤트 핸들러에 연결
20:19prevPageUrl 값이 유효하지 않은데 goToPrevPage를 누르면 currentPageUrl에 이상한 값이 들어오고 data fetching에 실패하게 됩니다. 이것에 대한 error handling으로 prevPageUrl이 유효하지 않을 때 goToPrevPage를 못누르게 해야합니다.
22:08이제 prevButton, nextButton은 prevPageUrl, nextPageUrl이 유효할 때만 가시화됩니다.
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기