React 생명주기 그리고 useEffect

React 아코디언 UI 구현 공부를 하면서 복기를 하고 있는데 마주친 코드이다.

useEffect(() => {
    if (descRef.current) {
      descRef.current.addEventListener("beforematch", toggle);
    }
    return () => {
      if (descRef.current)
        descRef.current.removeEventListener("beforematch", toggle);
    };
  }, [toggle]);

아니 useEffect에도 return 문이 있네?, 왜 if 문과 return 문에 addEventListener에서 remove로 빼주는 걸까? 하고 useEffect의 무지함에 궁금해서 찾아본 내용들을 기록한다.


위 코드의 목적은 descRef.current가 변경되거나 업데이트될 때마다 "beforematch" 이벤트 리스너를 추가하고,
컴포넌트가 언마운트 되거나 업데이트되기 전에 해당 이벤트 리스너를 정리하는 것이다.

 

useEffect 내에서 이벤트 리스너를 추가한 경우, 해당 이벤트 리스너를 정리(cleanup) 해주는 것이 중요하다고 한다.

그렇지 않으면 컴포넌트가 다시 렌더링 되거나 언마운트 될 때 해당 이벤트 리스너가 여전히 유효한 상태로 남아 있을 수 있고 이것이 메모리 누수(memory leak)로 이어질 수 있기 때문!

 

간단하게 설명하면

1. 컴포넌트가 처음 마운트 될 때 addEventListener로 이벤트 리스너를 등록.
2. useEffect의 반환값으로 제공한 함수는 컴포넌트가 언마운트 되거나 업데이트되기 전에 호출되며, 여기서는 removeEventListener를 사용하여 등록된 이벤트 리스너를 제거.

이렇게 함으로써 메모리 누수를 방지하고 이벤트 리스너가 적절한 시점에 등록 및 제거될 수 있도록 한다!

---

React 컴포넌트의 생명주기

1. 마운트 : 컴포넌트가 페이지에 처음 렌더링

2. 업데이트 : 부모가 리랜더링 될 때, props나 state가 변경될 때, context가 바뀔 때

3. 언마운트 : 컴포넌트를 DOM에서 제거하는 과정(페이지에서 사라질 때)

 

useEffect 란

컴포넌트가 렌더링 될 때마다 특정 작업 (effect)를 실행할 수 있도록 하는 훅

useEffect 구문

useEffect(()=>{
	console.log('실행')	
	return()=>{
		console.log('clean-up')
	}
}, [state])

 

첫번째 인자는 콜백함수로, useEffect가 호출될 때 실행되는 함수이다.

콜백함수 내부에서 반환하는 함수는 컴포넌트가 '업데이트', '언마운트' 될 때 실행되는 함수이다.

 

두번째 인자는 배열 : 배열 내부 변수가 변할때마다 useEffect 실행.

즉, deps로 컴포넌트의 'Update' 시점 캐치 가능.

 

useEffect 방법

1️⃣ useEffect(callBackFunc); 
2️⃣ useEffect(callBackFunc, []);
3️⃣ useEffect(callBackFunc, [state1, state2]);
4️⃣ useEffect(()=>{ return(() => func()) });

 

 

1️⃣ : 렌더링이  될 때마다 (컴포넌트 마운트 된 후 , 컴포넌트 업데이트, 컴포넌트가 언마운트 되기 전) 실행

2️⃣ : 최초 렌더링 되었을 때만 실행

3️⃣ : 최초 렌더링 + (state1 or state2) 변경되었을 때 실행

4️⃣ : useEffect는 clean-up으로 표현 하는 함수를 return 할 수 있는데 이 함수를 활용해 컴포넌트가 unMount 될 때 정리하거나 unScribe 해야할 것을 처리한다.

 

effect 타이밍

useEffect로 전달된 함수는 컴포넌트 렌더링 ➡️ 화면 업데이트 ➡️ useEffect실행 순으로 실행이 된다. 

즉, useEffect 실행은 최초 렌더링 이후에 된다는 것!

 

화면을 다 그리기 전 동기화 되어야 하는 경우에는?

useLayoutEffect()를 활용하여 컴포넌트 렌더링 ➡️ useLayoutEffect 실행 ➡️ 화면 업데이트 순으로 effect를 실행시킬 수 있다.