useEffect

React/React

[React] 사용자 경험을 위한 useLayoutEffect

지난 포스팅에서 useEffect 와 관려해서 작성했는데, useLayoutEffect 와 비교를 하면서 내용을 정리해보려 한다. [React] 컴포넌트 사이드이펙트를 위한 useEffect1. useEffect리액트 컴포넌트에서 Side Effects 를 위해서 사용하는데,쉽게 말해 컴포넌트가 렌더링 이후에 정의한 작업을 실행할 수 있도록 하는 훅이 useEffect() 이다.useEffect(setup, dependencies?)- setup : 수m-oonjm.tistory.com 1. Flow Diagram먼저 다이어그램을 통해 useLayoutEffect() 와 useEffect() 가 변경사항이 발생했을 때 언제 실행되는지 보면 좀 더 이해가 편하다.1. 업데이트가 발생하면, 리액트가 새로운..

React/React

[React] 컴포넌트 사이드이펙트를 위한 useEffect

1. useEffect리액트 컴포넌트에서 Side Effects 를 위해서 사용하는데,쉽게 말해 컴포넌트가 렌더링 이후에 정의한 작업을 실행할 수 있도록 하는 훅(Hook)이 useEffect() 이다.useEffect(setup, dependencies?)- setup : 수행하고자 하는 함수- dependencies? : 함수의 코드 내부에서 참조되는 모든 반응형 값들로 구성된 배열 2. 예제1. 컴포넌트 mount- 컴포넌트 첫 렌더링 시 한 번만 실행하고 싶을 때는 의존성 배열을 빈 배열로 넣어준다.useEffect(() => { console.log("mount")}, []);- 배열 생략 시에는 리렌더링 될 때마다 실행useEffect(() => { console.log("ever..

MJFE
'useEffect' 태그의 글 목록
상단으로

티스토리툴바