본문으로 건너뛰기

"useEffect" 태그로 연결된 2개 게시물개의 게시물이 있습니다.

모든 태그 보기

깜빡이는 UI를 거부하세요. useLayoutEffect, 페인팅 그리고 브라우저 이야기

Korean FE Article Team 에서 번역해주는 FrontEnd 소식을 아카이브 하였습니다.

no-more-flickering-ui_welcome

소개

이번 글은 평소 사용하는 리액트의 useEffect를 사용할 때 발생하는 깜빡인 현상을 주제로 평소 사용하는 브라우저의 주요 개념인 동기/비동기 개념을 중심으로 useEffect와 useLayoutEffect에 대해 깊이 있게 설명하는 글입니다.

자바스크립트의 관점으로 리액트에선 두 effect를 통해 어떤 방식으로 사용되는지, 쓰임새와 성능, 더불어 SSR까지 흐름으로 두 effect 훅에 대해 딥 다이브하기 좋은 글이 될 것 같습니다.

목차
  1. useEffect의 문제점이 뭘까요?
  2. useLayoutEffect로 수정하기
  3. 해결법이 효과적인 이유: 렌더링, 페인팅과 브라우저
  • useEffect와 useLayoutEffect 비교로 돌아가기
  • useEffect에 대해 좀 더 자세히 알아보기
  1. Next.js의 useLayoutEffect와 기타 SSR 프레임워크들

Refs in React - DOM 접근에서 명령형 API까지

FrontEnd에 관한 도움이 될만한 자료들을 번역

refs-from-dom-to-api

소개

목차
  1. useRef를 통한 React DOM 접근
  2. 부모 요소에서 자식 요소로 prop로 ref 전달하기
  3. forwardRef로 ref 전달하기
  4. useImperativeHandle를 사용하는 명령형 API
  5. 명령형 API에서 useImperativeHandle 제거하기