[리액트] 라이프사이클 useEffect와 componentDidMount, componentDidUpdate, componentWillUnmount 비교하기

1. mount

컴포넌트가 브라우저에 렌더링될 때 실행

componentDidMount

componentDidMount() {
  // 렌더링 시 실행될 코드
}

useEffect와 빈배열

useEffect(컴포넌트가 브라우저에 렌더렝될때 실행할 함수, []);

 

2. update

컴포넌트 내부 특정 요소가 업데이트될 때 실행

componentDidUpdate

componentDidUpdate(prevProps, prevState) { // 업데이트 되기 이전의 Props, State 값을 받아옴
  // 업데이트 된 값과, 업데이트 되기 이전의 값을 직접 비교해서, 함수를 실행시킴
  // 모든 props, state 값중 하나라도 변경사항이 있을 경우 실행할 코드를 이곳에 넣는다
  if (this.props.num !== prevProps.num) {
    // 특정 값이 업데이트 되었을 경우 실행할 코드를 이곳에 넣는다
    // num 이 업데이트되었을 때 실행할 코드
  }
}

useEffect와 배열안에 특정 값이 있는 경우

useEffect(배열에 있는 요소가 업데이트되는 시점에 실행할 함수, [업데이트 되는지 지켜볼 변수 또는 State]);

 

3. unmount

컴포넌트가 사라지기 전에 실행

componentWillUnmount

componentWillUnmount() {
  // 컴포넌트 사라지기 전에 실행할 코드
}

useEffect안에서 return이 있는 경우

useEffect(() => {return 컴포넌트가 사라지기 전에 실행할 함수})