[React] useEffect

useEffect를 좀 더 집중적으로 다뤄볼만한 가치가 있다고 느꼈다. 이는 라이프사이클과 직결되어있기 때문에 더 정확히 알고 사용해야겠다고 생각하면서 다시 리다기 책을 오랜만에 펴서 살펴보았다.

---

UseEffect

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅이다.

componentDidMount + componentDidUpdate

componentDidMount + componentDidUpdate + componentWillUnmount

 

마운트 될 때만 실행하고 싶을 때 (ComponentDidMount)

useEffect(() => {
	console.log('마운트될때만');
},[]);

컴포넌트가 화면에 맨 처음 렌더링 됐을 때만 실행하고 싶을 때는 두번째 파라미터에 빈 배열을 넣으면 된다.

보통 마운트 시에 적용하는 작업

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (REST API 등)
• 라이브러리 사용 (D3, Video.js 등...)
• setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

 

특정 값이 업데이트 될 때만 실행하고 싶을 때 (ComponentDidUpdate)

useEffect(() => {
	console.log('업데이트될때');
},[update]);

useEffect의 두번째 파라미터로 전달되는 배열 안에 업데이트될 때마다 검사하고 싶은 값을 넣어주면 된다.

 

언마운트 될 때(componentWillUnmount)

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
 }, []);

 

unmount 될 때만 뒷정리 함수를 호출하고싶으면 useEffect의 두번째 파라미터에 빈 배열을 넣으면된다.

뒷정리함수(cleanup)

컴포넌트가 나타날 때 -> 컴포넌트가 화면에 나타남

사라질때 -> 컴포넌트가 화면에서 사라짐

 

렌더링될 때마다 뒷정리 함수가 계속 나타난다.

뒷정리함수가 호출될 때는 업데이트되기 직전의 값을 보여준다.

 

언마운트시에 적용하는 작업

• setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거