[React] 함수형 컴포넌트의 생명주기

 

 

 

 

1. 함수형 컴포넌트의 생명주기 구현

리액트에서 컴포넌트의 생명주기란? 컴포넌트가 생성되고 제거되는 과정동안 일어나는 여러 단계를 말한다. 함수형 컴포넌트에서 생명주기와 관련된 작업을 처리하기 위해서는 원래는 별도로 구현했었어야 했지만, React 16.8 버전 이후로부터 Hook이 도입되고 나서 React Hook인 useEffect를 통해 손쉽게 구현하는 것이 가능해졌다.

리액트 공식문서에서 useEffect는 클래스형 컴포넌트의 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 결합한 기능이라고 소개하고 있다. useEffect를 통해 Mounting, Updating, Unmounting 처리를 할 수 있는 것이다.

 

 

2. useEffect 사용 case별 대응되는 생명주기 메서드

1) 의존성 배열없이 useEffect를 사용할 경우

useEffect에 의존성 배열 인자를 넘겨주지 않고 useEffect를 사용할 경우는, 모든 컴포넌트가 리렌더링 될 때마다 실행이 된다. 그렇기 때문에 이런 식으로 코드를 작성하면 엄청 많이 실행될 것이다.

useEffect(() => {
	// Todo
})

 

2) useEffect 의존성 배열인자에 빈 배열로 넘겨준 경우

빈 배열을 의존성 배열로 넘겨준 경우 최초 1번 실행된다. 주로 해당 컴포넌트에 진입했을 때 데이터 fetch 해올 경우 등에 사용된다.
이런 경우에는 componentDidMount()의 역할을 한다.

useEffect(() => {
	// Todo
}, [])

 

3) useEffect 의존성 배열에 Props나 State를 넘겨준 경우

의존성 배열의 props와 state의 상태나 값이 변경될 때마다 useEffect의 callback 함수가 실행된다. 컴포넌트로부터 전달 받은 props의 값에 변화가 발생하거나, 컴포넌트 내에서 state가 변하는 경우이다. 그럴 때 변화를 감지해 useEffect가 실행되는 것이다. 이런 경우 componentDidUpdate()와 getDerivedStateFromProps()의 역할을 한다. 

useEffect(() => {
	// Todo
}, [props, state])

 

4) useEffect로 Unmounting 구현

unmounting은 컴포넌트가 DOM에서 제거되기 직전에 호출되는 메서드인데 useEffect안에서 return 함수로 동일한 효과를 가질 수 있다. return 함수를 통해 메모리 반환을 하는 등의 정리작업을 수행할 수 있다.

  useEffect(() => {
    // 이 부분은 컴포넌트가 마운트될 때 실행됩니다.
    console.log('컴포넌트가 마운트되었습니다.');

    // Cleanup 함수 반환
    return () => {
      console.log('컴포넌트가 언마운트되거나 업데이트되기 전에 실행됩니다.');
      // Todo 
    };
  }, []);