hook이론2. Effect Hook

목차

1. side effects란?
2. useEffect() 메서드
3. effects의 유형
4. clean-up 개념
5. effect 발생시기
6. 조건부 effect

---

 

 

1. side effects(혹은 줄여서 effects)란?

• 다른 컴포넌트에 영향을 줄 수 있지만 렌더링 과정에서는 구현할 수 없는 작업들
• ex) React 컴포넌트 안에서 데이터를 가져오거나 업데이트/ 수동으로 컴포넌트의 DOM 직접 조작

 

 

2. useEffect()메서드

2-1. useEffect() 메서드란?

• 이펙트 훅
• 함수 컴포넌트 내에서 side effects를 수행할 수 있게 해주는 메서드
• useEffect에 전달된 함수는 모든 렌더링이 완료된 이후 실행됨(디폴트)
• 두번째 인자값 작성 시, 어떤 값이 변경되었을 때만 실행할 수 있게도 가능
• 아래의 3가지와 같은 목적이며, 아래의 3가지를 통합한 API라고 할 수 있음

• class 컴포넌트의 componentDidMount(),
• class 컴포넌트의 componeneDidUpdate(),
• class 컴포넌트의 componentWillUnmount()

 

import React, {useState, useEffect} from 'react'	//가져오기

const Effect = () =>{		//Effect 컴포넌트 생성
    const [count, setCount] = useState(0)		//count라는 state 선언


    useEffect()		//useEffect 메서드 호출    
    
    return(
        <div>
            <p>You clicked {count} times.</p>
            <button onClick = { () => { setCount( (prev) => prev+1 ) } }>
                Click me!
            </button>
        </div>
    )
}

 

2-2. 문법

두개의 인자값 가짐

1. 콜백함수(명령형 또는 어떤 effect를 발생하는 함수)
2. 배열(생략 가능) - 작성 시 조건부 effect

useEffect( () => {}, [] )

 

• 두번째 매개변수인 배열을 생략한 경우(=빈 배열인 경우), componentDidMount 한 것과 같은 효과
• 두번째 인자값 작성한 경우 componenDidUpdate한 것과 같음

 

 

 

3. side effects의 유형

• clean-up을 사용하지 않는 effect
• clean-up을 사용하는 effect

 

 

4. 정리(clean-up)?

• 컴포넌트가 화면에서 제거될 떄 정리해야 되는 리소스를 생성
• 이를 위해 useEffect로 전달된 첫번째 인자값인 콜백함수는 clean-up 함수 반환가능
• 외부 데이터에 subscription 설정하는 것과 같은 경우에 메모리 누수가 발생하지 않도록 함
• 메무리 누수 방지를 위해 UI에서 컴포넌트를 제거하기 전에 수행됨
• 만약 컴포넌트가 여러번 렌더링된다면, 다음 effect 수행 전 이전 effect는 clean-up 됨

 

5. effect 발생 시기

componentDidMount와 componentDidUpdate와는 다르게,

useEffect로 전달된 함수는 지연 이벤트 동안에 레이아웃 배치와 렌더를 완료한 후 수행된다.

 

<참고>
useEffect는 브라우저 화면이 다 그려질 때까지 기다렸다가 실행된다.
하지만 다음 어떤 새로운 렌더링이 발생하기 이전에는 무조건 실행된다.
즉, React는 새로운 업데이트 시작 전에 이전 렌더링을 항상 완료 한다!

 

 

하지만, 특정 effect는 화면 렌더링을 수행하기 이전에 발생할 필요가 있다.

 

 

예를 들어 사용자에게 노출되는 DOM 변경은

사용자가 노출된 내용의 불일치를 경험하지 않도록

다음 화면을 다 그리기 이전에 동기화 되어야 한다.

 

(그 구분이란 개념적으로는 수동적 이벤트 리스너와 능동적 이벤트 리스너의 차이와 유사하다고 한다...잘은 모르겠지만)

 

 

어쨋든,

화면 렌더링 이전에 동기화 되는 종류의 effect를 위해 React는 useLayoutEffect라는 추가적인 Hook을 제공한다.

 

 

useLayoutEffect()메서드는

• useEffect와 동일한 특징을 가지고 있고
• useEffect로 전달된 함수의 수행 시기만 다르다.

 

 

6. 조건부 effect

effect의 기본 동작은 모든 렌더링을 완료한 후 effect를 발생

이와 같은 방법으로 의존성 중 하나가 변경된다면 effect는 항상 재생성됨

 

source props가 변경될 때에만 필요한 것이라면 매번 갱신할 때마다 새로운 구독을 생성할 필요는 없다.

 

이것을 수행하기 위해서는 useEffect에 두 번째 인자를 작성하도록 하자.

앞서 말한대로 두번째 인자값은 배열이며, 해당 배열은 effect가 종속되어 있는 값의 배열입니다.