[7주차 위클리페이퍼] 리액트 생명주기

 

컴포넌트의 라이프사이클 단계

 

리액트 생명주기는 컴포넌트가 생성되고, 업데이트되고, 제거되는 과정을 관리하는 단계를 말한다.

 

과거 리액트가 함수형 컴포넌트가 아닌 클래스형 컴포넌트를 사용할 때에는 대표적인 생명주기 메서드가 세 가지가 있었다.

 

컴포넌트가 생성되고 DOM에 추가될 때 호출되는 단계인 Mount에서는 componentDidMount() 메서드

 

컴포넌트 상태나 props가 변경될 때 호출되는 단계인 Update에서는 componentDidUpdate() 메서드

 

컴포넌트가 DOM에서 제거될 때 호출되는 단계인 Unmount에서는 componentWillUnmount() 메서드

 

이 메서드들에 대해서는 아래 포스트에서 간략히 설명해 놓았다.

2023.05.26 - [React] - useCallback, state 스케쥴링, 클래스형 컴포넌트

useCallback, state 스케쥴링, 클래스형 컴포넌트

 

현재는 리액트에서 16.8 버전부터 함수형 컴포넌트를 사용하며, useEffect라는 하나의 훅으로 생명주기 기능을 처리할 수 있다.

 

useEffect 훅은 컴포넌트가 렌더링된 후 특정 작업을 수행할 수 있게 하는데, 위에 언급한 세 가지의 메서드의 역할을 모두 수행한다.

useEffect(() => {
  console.log("컴포넌트 실행과 함께 한번 실행");
}, []);

 

위 예시처럼 입력하면 컴포넌트의 마운트단계에서 콘솔에 출력하는 작업을 한번 실행하게 된다.

useEffect(() => {
  if (values) {
    setReady(true);
  } else {
    setReady(false);
  }
}, [values]);

 

위 예시에서는 values라는 값이 업데이트되면 실행되서 ready 값을 바꾸게 된다.

useEffect(() => {
    const time = setInterval(() => {
      console.log("출력");
    }, 1000);

    return () => {
      clearInterval(time);
      console.log("타이머 정리");
    }
  }, []);

 

위 예시는 1초마다 콘솔에 출력하는 코드이다. 그리고 컴포넌트에서 벗어날 때 이 출력도 끝나도록 클린업함수도 사용했다.

 

이처럼 마운트, 업데이트, 언마운트 각 라이프사이클 단계에서 이루어질 작업들을 useEffect 훅으로 간결하고 편하게 관리할 수 있다.

 

또, 리액트의 생명주기에 따라 관리하면 컴포넌트를 좀 더 효율적으로 관리하고 성능을 향상하는데 도움을 줄 수 있다.