React Lifecycle(리액트 생애주기 = 생명주기)

리액트 생애주기( = 생명주기 / Lifecycle )

우리가 생애주기를 배우는 이유에 대해서 저는 이렇게 생각합니다.
리액트의 생명주기를 이해하고 적절이 활용하면, 컴포넌트의 동작을 효과적으로 제어하고 최적화 할 수 있습니다.
특히, 데이터 fetching, 이벤트리스너 등록 및 해제, 애니메이션 처리에 유용하게 사용할 수 있습니다.

리액트 컴포넌트 생명주기는 컴포넌트가 생성되고 업데이트가 되며, 제거되는 과정을 말합니다.
이러한 생명주기의 가장 중요한 3가지는 생성(Mounting) -> 업데이트(Updating) -> 제거(Unmounting) 순서로 진행됩니다.
리액트 함수형 컴포넌트와 Hook을 사용하여 생명주기를 관리합니다.

마운팅(Mounting)

마운팅 단계는 컴포넌트가 DOM에 처음 삽입될 때 발생하는 단계 입니다.
마운팅 단계에서 중요한 메서드는 componentDidMount입니다.
해당 메서드는 컴포넌트가 DOM에 삽입된 직후에 호출되기 때문에 아래와 같은 역할을 수행합니다.
1. 외부 데이터 로딩 : api 호출이나, 데이터 fetching할 때 적합한 단계 입니다.
2. DOM 조작 : 컴포넌트가 렌더링 된 후에 DOM에 직접 접근해야 하는 작업을 수행할 수 있습니다.
3. 이벤트리스너 등록 : 필요한 이벤트리스너를 설정할 수 있습니다.
★ 마운팅 단계에서의 componentDidMount는 컴포넌트 생명주기에서 딱 한번만 호출되므로 초기 설정이나, 한번만 실행되는 경우에 이상적입니다.
★ 해당 메서드 안에서는 setState를 호출하여 컴포넌트의 상태를 업데이트 할 수 있습니다.
이는 추가적인 렌더링을 trigger 하지만, 브라우저가 화면을 업데이트하기 전에 발생합니다.

• constructor
  컴포넌트의 초기단계를 설정하고, 이벤트 핸들러를 바인딩하는 단계
  - props 초기화 : props를 호출하여 부모의 constructor를 실행하고, props를 사용할 수 있게 합니다.

• getDerivedStateFromProps
  props로부터 파생된 state를 가져옴
  즉, props로 받아온 것을 state에 넣어주고 싶을때 사용

• render
  컴포넌트의 ui를 랜더링하는 과정( = 단계 )

1. render 메서드는 컴포넌트의 ui를 정의합니다.
2. 해당 메서드는 React Element를 반환하여 컴포넌트가 어떻게 보여지는지를 설명합니다.
3. 가상 DOM 생성 : render가 반환한 React Element 기반으로 가상 DOM을 생성합니다. 이는 실제 DOM에 변경사항을 적용하기 전에 메모리상에서 ui를 표현하는 과정입니다.

• componentDidMount
  컴포넌트가 DOM에 삽입된 직후 호출합니다.
  외부 데이터를 불러오거나 DOM 조작을 수행하기 적합한 상태 입니다.

useEffect(()=>{
	console.log("componentDidMount");     
},[])

업데이트(Updating)

컴포넌트 props나 state가 변경될 때 발생하는 단계 입니다.

• shouldComponentUpdate
  컴포넌트가 re-rendering 여부를 결정하는 단계 입니다.

1. 성능 최적화 : 해당 메서드는 불필요한 rendering을 방지하여 성능을 향상시킵니다.
2. 렌더링 제어 : props나 state가 변경될때 다시 렌더링이 되어야하는지 여부를 결정합니다.

• render
  변경된 상태나 속성을 반영하여, ui를 다시 렌더링 하는 단계 입니다.

• componentDidUpdate
  컴포넌트가 완료된 후 호출 됩니다.
  DOM 조작이나, 네트워크 요청을 수행할 수 있습니다.

1. 호출 시점 : 컴포넌트가 re-rendering 된 직후 즉시 호출 됩니다.
   • 초기 렌더링에서는 호출되지 않습니다.
2. 네트워크 요청 : props나 state의 변경에 따라 새로운 데이터를 가져와야 할 때 사용할 수 있습니다.
3. 조건부 실행 : 특정 props나 state가 변경되었을때만 작업을 허용할 수 있도록 조건을 설정할 수 있습니다.
4. setState 사용 : 해당 메서드 안에서 setState를 호출 할 수 있지만 반드시 조건문을 사용하여야 합니다. 만약 그렇지 않으면 무한 루프에 빠질 수 있습니다.

useEffect(() => {
	console.log("count or exampleProp changed");     
},[count, exampleProp]);

언마운팅(Unmounting)

언마운팅 단계는 컴포넌트가 DOM에서 제거될 때 발생하는 단계 입니다.

• componentWillUnmount
  컴포넌트가 화면에서 사라지기 직전에 호출 됩니다.
  여기서 주로 DOM에 직접 등록했었던 이벤트를 제거하고, 만약에 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose기능이 있다면 여기서 수행 합니다.

1. 메모리 누수 방지 : 컴포넌트가 생성한 리소스를 해제하여 메모리 누수를 방지합니다.
2. 이벤트 리스너 제거 : 컴포넌트에서 등록한 전역 이벤트 리스너를 제거합니다.
3. 네트워크 요청 취소 : 진행중인 비동기 네트워크 요청을 취소합니다.
4. 외부 라이브러리 정리 : 컴포넌트에서 사용한 외부 라이브러리 인스턴스를 정리합니다.

useEffect(()=>{
	console.log("");     
    return(() => exampleAPI.unsubscribe());
})