뒤로 가기
홈으로 이동
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
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

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

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