함수형 컴포넌트 렌더링 with useEffect, useLayoutEffect

인트로

함수형 컴포넌트 렌더링 순서에 대해 다뤄봤습니다. 

---

클래스 컴포넌트의 생명주기

클래스 컴포넌트의 생명주기에 대해 알고 가면 더 쉽게 이해할 수 있습니다.

📌 생명주기 순서

1. 컴포넌트 실행
2. constructor() 실행 : 렌더링(DOM 생성) 이전에 수행되는 생성자 메서드
3. render() 실행 : 미리 구현한 HTML을 화면상에 보여줌
4. componentDidMount() 실행 : 렌더링이 수행된 이후에 실행됨

컴포넌트에 변화가 있을 때 componentDidUpdate() 실행

update가 발생하는 경우

1. props가 변경된 경우
2. state가 변경된 경우
3. 부모 컴포넌트의 리렌더링
4. foreUpdate 강제로 변경하는 경우

컴포넌트가 제거될 때 componentWillUnmount() 실행

---

클래스형과 함수형 비교

	함수형	클래스
Mounting	함수형 컴포넌트 내부	constructor()
Mounting	return()	render()
Mounting	useEffect()	componentDidMount()
Updating	useEffect()	componentDidUpdate()
UnMounting	useEffect()	componentWillUnmount()

---

함수형 컴포넌트

함수형의 경우 useEffect훅을 사용하여 생명주기를 구현할 수 있습니다.

 

📌 렌더링 순서

1. 함수형 컴포넌트 호출
2. 함수형 컴포넌트 내부 실행
3. return() → 화면 렌더링
4. useEffect() 실행

React 컴포넌트가 리렌더링 되는 경우

1. state 변경
2. props 변경
3. 중앙 상태값(redux store 등) 변경
4. 부모 컴포넌트가 리렌더링되는 경우, 자식 컴포넌트도 리렌더링

업데이트가 발생했을 때나 컴포넌트 unmount 시 조건부로 useEffect() 실행

함수 컴포넌트 내부

state, 사용될 함수들 정의

return()

부모 컴포넌트에게 전달받은 props 값 접근 가능

정의한 state 값 접근 가능

setState() 사용 불가능 → 사용해 보면 무한 렌더링을 경험할 수 있습니다.

useEffect(function, deps[optional])

componentDidMount() componentDidUpdate() componentWillUnmount()가 하나로 모여있다고 할 수 있습니다.

useEffect의 두 번째 인자로 들어오는 deps에 따라 action이 바뀝니다.

deps
없을 때	렌더링 된 후 수행, 리렌더링이 발생할 때마다 다시 수행됨
빈 배열일 때	처음 마운트 될 때만 수행, 즉 렌더링 된 후 최초 한 번 실행
값이 있을 때	첫 렌더링 된 이후에 수행 + 값이 변경되었을 경우 수행됨

---

useLayoutEffect

React에서 side Effect를 관리하기 위해 따르는 규칙 중...

side effect가 외부 시스템과 component를 동기화하고 브라우저 화면을 paint 하기 전에 side effect를 실행해야 하는 경우 side effect를 useLayoutEffect 안에 넣는다.

리액트 관련 자료를 보다가 익숙하지 않은 훅이 있어 궁금하여 정리하게 됐습니다.

 

사용 형태는 useEffect와 완전히 동일합니다.

useLayoutEffect(setup, dependencies?)

useLayoutEffect(() => {
  동작
  return () => {
		cleanup 함수
  };
}, [의존성배열])

useEffect와 차이점

호출 시기에 차이가 있습니다.

useLayoutEffect는 브라우저가 화면을 다시 그리기 전에 실행되는 useEffect 버전입니다.

useEffect의 경우 DOM 레이아웃 배치와 페인트가 끝난 후 이펙트 함수를 호출하지만

useLayoutEffect는 페인트 전에 실행됩니다.

 

공식 문서의 example을 살펴보면 확실히 알 수 있습니다.

useLayoutEffect blocks the browser from repainting / useEffect does not block the browser
브라우저가 화면을 그리기 전에 useLayoutEffect 내부 코드랑 내부에서 예약된 상태 업데이트가 처리되도록 보장!
이때 브라우저의 페인팅을 차단하는 것 → 툴팁 렌더링 후 측정 다시 렌더링 한다는 겁니다. 

useLayoutEffect의 목적

컴포넌트가 렌더링을 위해 레이아웃 정보를 사용하도록 하는 것.

1. 초기 콘텐츠를 렌더링 합니다.
2. 브라우저가 화면을 다시 그리기 전에 레이아웃을 측정.
3. 읽은 레이아웃 정보를 사용하여 최종 콘텐츠를 렌더링 합니다.

뭔가 useEffect보다 좋은 것 같은데요..? 공식 사이트를 가면 함정 카드를 바로 보여줍니다.

성능 구려질 수 있으니 가능하면 useEffect 쓰세요.라고 하네요.

 

참고로 서버 렌더링에서 useLayoutEffect는 아무것도 못합니다. 서버에 레이아웃 정보가 없기 때문이죠.

이럴 때는 useEffect로 대체하거나 컴포넌트를 클라이언트 전용으로 표시해야 합니다.

(참고 : https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85)

이외에도 공식 문서에서 이를 해결하기 위한 다양한 방법을 소개하고 있습니다.

---

코드

---

https://adjh54.tistory.com/43 와 https://curryyou.tistory.com/486를 참고했습니다.