LearnFit
YouTube, Learn useEffect In 13 Minutes
[React - 노트] 13분 안에 익히는 useEffect
#전체
#개발자
#프론트엔드
#webdevsimplified
#react hooks
#react tutorial
#react js tutorial
#react hooks tutorial
#react hooks project
#learn react hooks
#learn react js
#learn usestate in 15 minutes
#react beginner
#useEffect
#react useEffect
#react js useEffect
#useeffect hook
#react useeffect hook
#useeffect tutorial
#reactjs useeffect
#react js useEffect tutorial
#use effect react js
#learn react useEffect
#react lifecycle method
#learn useeffect in 13 minutes
#react useeffect js
#javascript
#js
00:00영상 개요(영상 속 내용과는 무관한 필기)
React의 useEffect hook을 설명하는 영상에 대해 다시 상기하려고 노트하는 것에 집중한 해설노트입니다.
*만약 useEffect를 잘 모르시는 분들이라면 useEffect가 hook의 매우 중요한 부분인만큼 노트에 언급되지 않은 부분까지도 집중해서 시청하시길 추천드립니다.
더욱 자세한 정보는 리액트 공식문서의 useEffect 파트를 참조해보세요!
https://reactjs.org/docs/hooks-reference.html#useeffect
00:00배경 지식:
얕은 비교(shallow comparison)란? 간단히 말하자면 객체, 배열, 함수와 같은 참조 타입들을 실제 내부 값까지 비교하지 않고 동일 참조인지(동일한 메모리 값을 사용하는지)를 비교하는 것을 뜻한다. 객체(object), 배열(array), 함수(function)와 같은 객체들은 같은 참조 값이 아니라면 새로운 값으로 판단하는 것이다.
01:13영상 시작(코드 설명)
*useState 지식 필요
02:03사용할 api 설명
03:00useEffect 작성 시작
03:28tab(Posts, Users, Comments)을 바꿀 때마다 component가 re-rendering 되고 useEffect 속 effect 함수가 호출됩니다.(console.log)
03:46useEffect의 effect함수를 조건적으로 실행시키는 방법
03:50useEffect's second parameter: dependancy array
1. array의 항목 중 하나라도 변경되면 effect 함수가 rendering 이후 실행됩니다.
2. dependancy array의 항목은 이전 rendering과 비교될 때 shallow comparison(referential equality comparision)으로 비교됩니다.
*반대로 deep comparison은 value의 equality를 비교
05:21useEffect의 effect 함수가 Component 첫 번째 렌더링 시에만 실행되도록 하는 방법(dependancy array에 []입력)
06:18useEffect로 api 호출하기
07:26side effect로 받아온 api 호출 결과를 state로 관리하기
08:27useEffect 또 다른 사용 사례 설명(subscription)
event listener 등록하기
10:08화면의 크기를 조절하면 우측에서 width 값을 표시하고 있습니다.
*영상 원리 이해하기(이해하셨다면 패스): 화면 크기가 resize 될 때마다 handleResize함수가 호출되고setWindowWidth에 의해서 계속 App 컴포넌트가 re-rendering 되기 때문입니다. window의 사이즈가 변할 때마다 handleResize를 호출하라고 useEffect를 통해 event listener에 등록했기 때문에 가능한 일입니다. (event listener 등록은 한 번이면 족하기 때문에 useEffect의 dependancy array는 빈배열입니다.)
10:46useEffect에 clean up function 등록방법
*component unmount시 event listener를 제거해야하므로 clean up function으로 처리해줘야합니다.
11:47clean up function이 호출되는 시점은 컴포넌트가 unmount 되는 순간입니다.
그래서 컴포넌트가 re-rendering 되기 전에 clean-up function이 호출되고 그 다음 effect 함수가 호출되는 것이죠.
13:24영상 끝
아래는 영상에서 언급되지는 않았지만 공식문서에서 복사 붙여넣기한, 알아두면 좋을 내용입니다.
*숙련된 자바스크립트 개발자라면 useEffect에 전달된 함수가 모든 렌더링에서 다르다는 것을 알아챘을지도 모릅니다. 이는 의도된 것으로서, state 값이 제대로 업데이트 되는지에 대한 걱정 없이 effect 내부에서 그 값을 읽을 수 있게 하는 부분이기도 합니다. 리렌더링하는 때마다 모두 이전과 다른 effect로 교체하여 전달합니다. 이 점이 렌더링의 결과의 한 부분이 되게 만드는 점인데, 각각의 effect는 특정한 렌더링에 속합니다.
✔ 학습 완료
이 학습노트가 포함된 러닝패스예요.
서원석님의 다른 노트는 어때요?
서원석
의 학습노트
리액트로 이미지 미리보기 구현(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초 만에 가입하기