useEffect을 배우면서 lifecycle에 대한 개념을 알면 좋을 거 같아서 공부 후 정리해봄 🏃‍♀️ 🏃‍♀️

What are React Lifecycle methods?

Component Lifecycle

• mount : 탈 것에 탄 | 탑재하다
• 각각의 리액트 컴포넌트가 DOM에 마운트 되고 언마운트되는 사이클
• 리액트 라이프사이클을 이해한다면 리액트 컴포넌트를 제대로 컨트롤하고 앱의 성능을 향상시킬 수 있다함! 🙄

출저
A Deep Dive into React Lifecycle Methods

• 우선 리액트는 각가의 컴포넌트에는 라이프 사이클, 즉 컴포넌트의 수명주기가 존재한다.
• 생명주기 메서드 : 생명주기 메서드(Lifecycle method)는 컴포넌트의 각각의 단계에서 실행되는 커스텀 기능입니다. 컴포넌트가 만들어지고 DOM에 삽입될 때(mounting), 컴포넌트가 업데이트될 때 및 컴포넌트가 DOM에서 마운트 해제될 때(unmounted) 혹은 제거될 때 사용할 수 있는 기능을 제공합니다.

1. Mounting - 생성될 때

Constructor (생성자)

• 초기 state를 정할 수 있다.
• hook에서는 useState hook을 사용한다.

class Example extends React.Component {
 constructor(props) {
   super(props);
   console.log("constructor");
 }
}

const Example = () => {
  const [count,setCount] = useState(0);
}

render

• 컴포넌트를 렌더링할 때 필요한 메서드로 클래스형 컴포넌트에서는 필수 메서드이다.
• 함수형 컴포넌트에서는 render를 안쓰고 렌더링할 수 있다.

// Class
class Header extends React.Component {
  render() {
    return <div>헤더</div>
  }
}

// Function
const Header = () => {
  return <div>헤더</div>
}

componentDidMount() / useEffect()

• 컴포넌트가 처음 렌더링한 후 이 메서드가 실행된다. 즉, 컴포넌트가 마운트 되어야만 이 메서드는 실행될 수 있다.
• 함수형 컴포넌트에서는 useEffect를 사용한다.

// Class
class Example extends React.Component {
    componentDidMount() {
        ...
    }
}

// Function
const Example = () => {
    useEffect(() => {
        ...
    }, []);
}

• D3, masonry처럼 DOM을 사용해야하는 외부 라이브러리 연동시 사용
• 해당 컴포넌트에 필요한 데이터를 요청하기 위해 axios, fetch등을 통하여 ajax 요청을 하거나 DOM 속성을 읽거나 직접 변경하는 작업을 진행한다.

2. Updating - 업데이트

static getDerivedStateFromProps()

• props 로 받아온 것을 state 에 넣어주고 싶을 때 사용한다.

shouldComponentUpdate() / react.memo

• props나 state를 변경했을 때, 리렌더링을 결정하는 메서드이다.
• 반드시 true 혹은 false를 반환해야한다.
• 이 메서드는 오직 성능 최적화만을 위한 것이며, 렌더링 목적을 방지하는 목적으로 사용 시 버그로 이어질 수 있다.
• 훅으로는 react.memo를 사용한다 ( 아직 안배워서 추후에 업데이트 할 예정)

componentDidUpdate() / useEffect()

• 리렌더링을 완료한 한 후 실행한다.
• DOM관련 처리를 해도 무방 (업데이트가 끝난 직후)

// Class
class Example extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        ...
    }
}

// Function
const Example = () => {
    useEffect(() => {
        ...
    });
}

3. Unmounting - 제거할 때 (화면에서 사라질 때)

componentWillUnmount / useEffect()

• componentWillUnmount 는 컴포넌트가 화면에서 사라지기 직전에 호출됩니다.
• 주로 DOM에 직접 등록했었던 이벤트를 제거하고 setTimeout은 clearTimeout을 통해 제거
• 외부 라이브러리 중 dipose기능이 있다면 이곳에 호출
• hook에서는 useEffect의 cleanup함수가 해당된다.

// Class
class Example extends React.Component {
    coomponentWillUnmount() {
        ...
    }
}

// Function
const Example = () => {
    useEffect(() => {
        return () => {
            ...
        }
    }, []);
}

참고 블로그 및 웹사이트

kyun2da.de
벨로퍼트와 함께하는 모던 리액트
리액트공식문서 - state and lifecycle
A deep dive into React Lifecycle
Replacing React Lifecycle Method with Hooks