LearnFit
YouTube, [React hooks 이해] #2편. Fetching data와 Custom hooks
useState, useEffect로 todo app 만들기 part 2
#전체
#개발자
#프론트엔드
#react
#hooks
#data fetching
#custom hooks
00:01시작
02:02fetching data를 useEffect로 구현
04:39fetching한 data를 todos state에 입력
04:59list에 key 삽입하기
*A “key” is a special string attribute you need to include when creating lists of elements.(출처: 리액트 공홈)
*Keys used within arrays should be unique among their siblings. However, they don’t need to be globally unique. We can use the same keys when we produce two different arrays(출처: 리액트 공홈)
06:49loading 처리를 위한 state 추가
07:47List 컴포넌트에 전달되는 props object는 이제 두 개의 property를 가집니다(todos, loading)
아, List 컴포넌트는 동일한 todos, loading에 대해 항상 같은 return(UI)이 되어야하는데요(공식문서에 의하면) 정말 그럴까요?
loading이 false이고 todos가 '밥 먹기', '놀기'이면 결과는 항상 loading...일거에요.
loading이 true이고 todos가 '밥 먹기', '놀기'이면 결과는 항상 '밥 먹기', '놀기'일거구요.
List는 기준 통과군요 ㅎㅎ
그렇다면 여러 분의 컴포넌트는 어떨까요? 항상 이 점 유의해서 컴포넌트를 작성하도록 해보아요!
*All React components must act like pure functions with respect to their props.(Fure functions do not attempt to change their inputs, and always return the same result for the same inputs.) 출처: 리액트 공식문서
07:56loading 값을 토대로 List를 conditional rendering하네요. 방법엔 여러가지가 있습니다.
1. if else
2. &&
3. : ?(삼항연산자)
이 중에 어떤 방법을 선택해야할까요?
공식문서는 이렇게 얘기해주네요.
"Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable."
네 실제로 영상 속에서도 conditional rendering하지 않고 그냥 todoList라는 변수에 React element를 조건적으로 담아서 그 값을 렌더링 해주고 있네요
09:08커스텀 훅 작성 시작(useFetch)
input: callback, url
output: loading
14:22list로 처리하는 li에 key를 id로 주기 위해 addTodo에서 todo 추가 시에 id property를 부여합니다.
*The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. (출처: 리액트 공식문서)
16:49useFetch를 파일로 분리
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)
Video
⏱ 핵심 스탬프25개
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
서원석
의 학습노트
리액트 라우터 버전 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에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기