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이 유효할 때만 가시화됩니다.

22:25끝

✔ 학습 완료

취소

작성하기

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

리액트 useState, useEffect로 구현하는 프로젝트 모음

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

서원석

의 학습노트

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

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기

👋 다양한 인사이트를 읽어보고 계신가요?

나만의 학습 기록을 남기고, 관리하고 싶다면!

다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!

나의 학습 내용을 공유하고, 수익을 올리고 싶다면!

3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.

3초 만에 가입하기