16. useEffect를 사용하여 마운트/언마운트/업데이트 시 할 작업 설정하기

useEffect라는 Hook을 사용하여 컴포넌트가

• 마운트 됐을 때 (처음 나타났을 때)

• 언마운트됐을 때 (사라질 때)

• 업데이트 될 때 (특정 props가 바뀔 때)

useEffect(() => {
		// 마운트 시 하는 작업을 작성
    console.log('컴포넌트가 화면에 나타남');
    return () => {
			// 언마운트 시 하는 작업을 작성 (업데이트 되기 바로 직전에 호출)
      console.log('컴포넌트가 화면에서 사라짐');
    }
  }, []);

useEffect

1) 첫번째 파라미터 : 함수

 

2) 두번째 파라미터 : 의존값이 들어있는 배열 (deps) - 만약 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect에 등록한 함수가 호출 마운트 시 하는 작업에 바뀌기전값이 들어감 - deps 에 특정값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다. 언마운트 시에도 호출이 되고, 값이 바뀌기 직전에도 호출이 된다. - useEffect 안에서 사용하는 상태나 props를 넣는다. 넣지 않게되면 useEffect 에 등록한 함수를 실행할 때 최신 props / 상태를 가리키지 않게 된다.

3) 두번째 파라미터 생략 시 : - 컴포넌트가 리렌더링 될 때마다 호출됨

 

4) 반환하는 함수 : cleanup 함수 - useEffect 에 대한 뒷정리 - deps 가 비어있는 경우 컴포넌트가 사라질 때 cleanup 함수가 호출됨

 

마운트 시에 하는 작업

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정

• 외부 API 요청 (REST API 등)

• 라이브러리 사용 (D3, Video.js 등…)

• setInterval 을 통한 반복작업 혹은 setTimeout을 통한 작업 예약

 

언마운트 시에 하는 작업

• setInterval, setTimeout을 사용하여 등록한 작업들 clear하기 (clearInterval, clearTimeout)

• 라이브러리 인스턴스 제거

 

💡

리액트 컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링되면, 바뀐 내용이 없다할지라도, 자식 컴포넌트 또한 리렌더링 된다.

실제 DOM에 반영되는 것은 바뀐 내용이 있는 컴포넌트에 해당하지만, Virtual DOM에는 모든 것을 다 렌더링하고 있다.

 

사용 예시

uri구조로 웹 페이지 불러오기

useEffect(() => {
    loadPost(username, urlSlug);
  }, [username, urlSlug]);

→ urlSlug나 username이 바뀔 때마다 웹페이지를 새로 그린다.