# useLayoutEffect

15개의 포스트

[TIL] useEffect와 useLayoutEffect의 차이

useEffect와 useLayoutEffect의 차이

2022년 6월 7일
·
1개의 댓글

useCallback Hooks

리액트 성능 최적화와 관련된 내용을 살펴볼때마다 useMemo()와 달리 제대로 이해되지 않는 부분이 많았습니다. 이와 관련하여 알게된 내용을 정리합니다.일반적으로 useMemo()와 useCallback()은 다음과 같은 방식으로 이해됩니다.useMemo() - 복잡

2022년 6월 6일
·
2개의 댓글
post-thumbnail

읽은 좋은 글들 (~22.5.23)

메일링, 블로그, 구글링 등을 통해 읽은 좋은 글들을 모아놓은 글이다.

2022년 5월 23일
·
0개의 댓글

useEffect vs useLayoutEffect

오늘은 useEffect와 useLayoutEffect의 차이에 대해 공부해보려고 합니다. 일단 2가지 과정에 대해 알아야합니다. Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표

2022년 3월 19일
·
0개의 댓글
post-thumbnail

[React] useLayoutEffect VS. useEffect

Rander: DOM Tree를 구성하기 위해 각 엘리먼트의 속성을 Paint: 실제 화면에 레이아웃을 그리면서 업데이트 하는 과정useEffect를 사용했을 때 동작 순서는 아래와 같다.HTML 영역을 화면에 그린다 👉 useEffect 실행 👉 state 호출

2022년 3월 11일
·
0개의 댓글

useLayoutEffect

useEffect와 매우 동일하다단 하나의 차이점useEffect는 페인트가 끝난뒤에 실행되지만,useLayoutEffect는 실행된 뒤 페인트 된다.

2022년 2월 19일
·
0개의 댓글

20220207 TIL

useLayoutEffect는 useEffect와 다르게 렌더링 전에 callback을 실행함으로서, callback 내부에서 view에 그려질 데이터가 변경되어도 해당 view 부분에서 깜빡임이 발생하지 않는다는 장점이 있다.따라서 무적권 useLayoutEffect

2022년 2월 8일
·
0개의 댓글

useEffect vs useLayoutEffect

useEffect useLayoutEffect

2021년 10월 27일
·
0개의 댓글
post-thumbnail

useLayoutEffect 알아보기

react native로 작업을 하던 중, TextInput 클릭 시 TextInput width가 줄어들고 cancel 버튼이 생기고 cancel 버튼을 누르면 다시 사라지는 헤더를 구현하고 싶었다.☝️ 이것 처럼 !처음에는 이렇게 작성하였다. 이렇게 작성하니 con

2021년 6월 25일
·
0개의 댓글

TIL : getBoundingClientReact, React 내장 훅, 함수형 컴포넌트

요소의 크기와 viewport에 대한 요소의 위치에 대한 정보를 제공하는 DOMRect개체를 반환한다.메모이제이션된 값을 반환한다. 첫 번째 인자로는 함수, 두 번째는 의존성 값의 배열을 전달한다.의존성이 변경되었을 때만 첫 번째 인자에 전달한 함수가 실행된다.즉, 의

2021년 5월 26일
·
0개의 댓글

기술 면접에서 받은 질문 (2) - React 및 기타

요 근래 몇몇 크고 작은 회사에서 기술 면접을 봤다. 받았던 기술 관련 질문들을 정리해 보았다. 이 글에는 React를 비롯한 여러 라이브러리와 기타 프론트엔드 관련된 내용들을 정리했다. Vanilla JavaScript 관련 글은 이전 글에서 정리했다.

2021년 4월 30일
·
0개의 댓글
post-thumbnail

[React] 렌더시 깜빡거림 해결 Trouble shooting

2021-03-16. 문제가 됐던 상황이 있었다. useEffect vs useLayoutEffect의 문제인줄 알았으나 state에 의해 렌더가 되는 것이어서, React.memo를 사용하여 해결하였는데...

2021년 3월 16일
·
0개의 댓글
post-thumbnail

react hooks(useReducer, useImperativeHandle, useLayoutEffect)

useReducer, useImperativeHandle, useLayoutEffect 훅에 대한 내용을 다룸

2020년 8월 18일
·
0개의 댓글

React Hooks #10 useLayoutEffect(), useDebugValue()

useEffect() 는 비동기useLayoutEffect() 는 동기useLayoutEffect() 훅의 로직에서 연산이 많으면 브라우저가 먹통이 될 수 있으니 주의!앵간하면 useEffect() 사용하고, 렌더링 직후 돔요소의 값을 읽는 경우 useLayoutEff

2020년 7월 13일
·
1개의 댓글