[006] 리액트 (React) 배우기 - 함수형 컴포넌트 useEffect Hook(훅) 사용, 클래스형 컴포넌트 생명주기 이해

안녕하세요~ totally 개발자입니다.

 

useEffect Hook (훅)

 

저번 시간에는 useState에 대해 살펴보았고 이번에는 useEffect Hook에 대해 살펴보도록 하겠습니다. 앞서 클래스형 컴포넌트에는 생명 주기(Lifecycle)가 있다고 이야기하였습니다. 이를 함수형 컴포넌트에서도 사용할 수 있도록 도입된 것으로 먼저 클래스형 컴포넌트에서의 생명주기(Lifecycle)에 대한 이해가 필요합니다. 간단하게 정리하면 아래 표와 같습니다.

 

단계	의미	클래스형 컴포넌트 사용 예제	함수형 컴포넌트 사용 예제
componentDidMount	컴포넌트가 마운트되었을 때, 마운트(Mount)란 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미	componentDidMount() {}	useEffect(() => {}) -> 랜더링 될 때마다 실행 useEffect(() => {}, []) 이렇게 하는 경우에는 최초에 랜더링 될 때만 실행.
componentDidUpdate	컴포넌트가 업데이트되었을 때 호출됨.	componentDidUpdate() {}	useEffect(() => {}, [변경되는 상태 변수])
componentWillUnmount	컴포넌트가 DOM에서 사라질 때 호출됨.	componentWillUnmount() {}	useEffect(() => { 실행내용, return 언마운트될 때 실행 내용})

 

마운트 즉 랜더링 완료되었을 때에 사용되는 componentDidMount(), 컴포넌트가 업데이트되었을 때 사용되는 componentDidUpdate, 컴포넌트가 DOM에서 언마운트 즉 DOM에서 사라질 때 componentWillUnmount를 사용합니다. 아래 예제를 통해서 직접 실습해보시면 쉽게 이해할 수 있습니다.

 

 

 

componentDidMount() 부분에 setTimeout과 setState를 사용하여 시간에 따라 값을 반영하고 업데이트하는 로직을 넣어주었습니다. 또한 componentWillUnmount를 확인하기 위해 ProfileComponent와 JobComponent 2가지를 만들어서 ProfileComponent에서의 버튼을 클릭하면 JobComponent를 더 이상 DOM에서 보여지지 않도록 했습니다. 개발자 도구로 확인한 결과는 아래와 같습니다.

 

 

만약 이것이 이중으로 실행되는 경우에는 index.js에서 <React.StrictMode> 부분을 주석처리해보시고 테스트해보시면 위와 같이 잘 나옵니다. 이것을 이해한 상태에서 useEffect를 살펴보겠습니다.

 

 

여기에서 중요한 부분은 아래입니다.

useEffect(() => {
    if (job === "Developer") {
      setTimeout(() => {
        setJob("Frontend Developer")
      }, 3000);
      console.log("Mount Job Component!");
    }
    else {
      console.log("Update Job Component!");

      return () => {
        console.log("Clear Job Component!");
      }
    }    
  }, [job]);

쉬운 이해를 위해 Mount, Update, Clear 부분을 이렇게 표시했습니다. 여기에서 보시면 if (job === "Developer") 초기에 Developer string value인 경우에는 setTimeout 함수로 setJob("Frontend Developer")을 호출해서 job의 상태를 업데이트해줍니다. 이미 "Frontend Developer"인 경우에는 update되었음을 표시하기 위해 else로 감싸주었고 마지막에 return 함수를 넣어주어 clear 해주면 됩니다. 그리고 맨 밑에 [job]을 표기하여 job의 상태가 업데이트될 때마다 useEffect를 반복해서 실행하면 됩니다.

 

결과는 아래와 같이 콘솔로 확인할 수 있습니다.

 

useEffect는 3가지 형태로 사용되는데 아래와 같습니다.

1) useEffect(() => {}) --> 렌더링될 때마다 실행

2) useEffect(() => {}, []) --> 최초 렌더링될 때만 실행(단발성)

3) useEffect(() => {}, [상태변수]) --> 상태 변수가 변경될 때마다 실행

 

그리고 return () => {} 넣어주시면 unmount 즉 clear하는 코드도 넣어줄 수 있습니다. 저번 시간에 살펴본 useState와 useEffect Hook은 반드시 알고 있어야 하기 때문에 실습을 통해 이해하시는 것을 권장드립니다.