뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, Learn useLayoutEffect In 5 Minutes
서원석님의 학습노트

[React - 요약, 번역] 5분 안에 익히는 useLayoutEffect

#전체
#개발자
#프론트엔드
#webdevsimplified
#react hooks
#react tutorial
#react js tutorial
#react hooks tutorial
#react hooks project
#learn react hooks
#learn react js
#react beginner
#uselayoutEffect
#react uselayoutEffect
#react js uselayoutEffect
#uselayouteffect hook
#react uselayouteffect hook
#uselayouteffect tutorial
#reactjs uselayouteffect
#react js uselayoutEffect tutorial
#use effect react js
#learn react uselayoutEffect
#react lifecycle method
#react uselayouteffect js
#javascript
#js
00:00영상 개요(영상 속 내용과는 무관한 필기) React의 useLayoutEffect hook을 설명하는 영상에 대해 요약 및 번역에 집중한 해설노트입니다. 더욱 자세한 정보는 리액트 공식문서의 useLayoutEffect 파트를 참조해보세요! https://reactjs.org/docs/hooks-reference.html#uselayouteffect
00:18영상 시작(해당 노트부터 학습을 시작하세요) useLayoutEffect가 useEffect와 거의 동일하다고 말하며 useEffect에 익숙치 않다면 먼저 학습하고 오라고 얘기하고 있습니다.
00:30코드 설명 count state가 update 될 때마다 useEffect가 실행되는 코드입니다.
00:49(~02:15)useEffect와 useLayoutEffect의 차이 useEffect: state change -> 컴포넌트 렌더링 -> 렌더링된 컴포넌트가 화면에 그려짐 -> useEffect 속 함수 실행(useEffect 속 함수의 내용과 상관없이 일단 화면이 그려지기 때문에 비동기적) useLayoutEffect: state change -> 컴포넌트 렌더링 -> useLayoutEffect 속 함수 실행(이 함수가 완료되기 전까지 다음 단계로 안넘어감, 동기적인 코드) -> 렌더링된 컴포넌트가 화면에 그려짐 위의 차이 때문에 화면 속 요소를 측정하거나, 움직이거나 layout과 관련된 작업을 해야할 때 useLayoutEffect가 유용하다고 말합니다. 대신 useLayoutEffect는 동기적으로 코드 실행이 이뤄짐으로 성능적으로 useEffect보다 좋지 않다고 말하며 useEffect로 구현 가능한지 먼저 확인한 후에 잘 동작하지 않을 때 useLayoutEffect를 고려해야한다고 말합니다.
02:15<useEffect vs useLayoutEffect> useEffect로 ModalExample 컴포넌트 구현 modal이 처음에는 'click here' 바로 밑에 위치했다가 순식간에 위치를 벌리며 다시 화면에 그려집니다. useEffect는 위에서 적었듯이 화면이 그려지고 난 후에 modal의 위치를 정하는 함수를 실행시키기 때문에 그렇습니다.
02:35*(개인적인 필기이므로 넘어가셔도 좋습니다)ModalExample 컴포넌트 코드에서 개인적으로 알게 된 사실 필기 1. return으로 useEffect의 실행 중 중간에 끊을 수 있습니다. 2. ref.current.style.[top, bottom... style property] 등으로 ref object에 스타일을 지정할 수 있다는 것을 알게 됨 3. component rendering이 DOM에 반영시키는 작업인 것을 알게 됨(DOM에 반영되는 것과 화면에 그려지는 것은 다르다는 것도 알게됨)
04:01<useEffect vs useLayoutEffect> useLayoutEffect로 ModalExample 컴포넌트 구현 modal이 처음부터 'click here' 과 거리가 벌려진 채로 위치하게 됩니다. useLayoutEffect는 위에서 적었듯이 화면이 그려지기 전에 동기적으로 modal의 위치를 정하는 함수를 실행시키기 때문에 그렇습니다.
04:17영상 정리: 위의 차이 때문에 화면 속 요소를 측정하거나, 움직이거나 layout과 관련된 작업을 해야할 때 useLayoutEffect가 유용하다고 말합니다. 대신 useLayoutEffect는 동기적으로 코드 실행이 이뤄짐으로 성능적으로 useEffect보다 좋지 않다고 말하며 useEffect로 구현 가능한지 먼저 확인한 후에 잘 동작하지 않을 때 useLayoutEffect를 고려해야한다고 말합니다. useEffect와 useLayoutEffect의 차이를 잘 설명하는 글 링크: https://kentcdodds.com/blog/useeffect-vs-uselayouteffect
04:37영상 끝
✔ 학습 완료

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

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

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

리액트로 이미지 미리보기 구현(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초 만에 가입하기