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영상 끝

✔ 학습 완료

취소

작성하기

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

무료

서원석

의 러닝패스

리액트 훅(React hook) 이해하기

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

서원석

의 학습노트

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