[React] 리액트 생명주기(Life Cycle)

1) React 생명주기란?

- 컴포넌트가 생성되고 화면에 나타나고 사라지는 과정을 설명하는 메서드의 연속

- 마운트(Mounting), 업데이트(Updating), 언마운트(Unmounting) 일반적으로 3단계로 구분되어 있고, 각 단계마다 특정한 메서드를 사용

- class components에서 사용하고,  함수형 컴포넌트는 hooks를 이용해서 상태변화를 관리 

 

 

2) 생명주기 3단계

2-1. 마운트(Mounting)

- 마운트는 컴포넌트가 DOM에 삽입되어 화면에 나타나는 것을 말합니다. 생명주기의 마운트는 컴포넌트가 생성되어 DOM에 삽입되는 과정을 다루고, 컴포넌트가 처음으로 화면에 나타나는 작업을 수행하는 단계입니다. 

 

<주요메서드>

1. constructor 

• 컴포넌트의 생성자 메서드로, 컴포넌트가 생성될 때 가장 먼저 실행됩니다.
• 초기  상태 설정 및 이벤트 핸들러를 바인딩 합니다.

2. render 

• 컴포넌트의 UI를 생성하는 메서드입니다.
• 이 메서드는 반드시 구현되어야 하는 필수 메서드이며, 리액트는 이 메서드의 반환값을 사용하여 DOM을 업데이트합니다. 

3.componentDidMount

• 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행됩니다
• 컴포넌트가 화면에 나타난 후 내트워크 요청, 외부데이터를 가져오거나, 초기화, 이벤트 리스너 추가 등의 작업을 수행할 수 있습니다

 

 

2-2) 업데이트 

- 업데이트 단계는 컴포넌트가 새로운 props나 state를 받았을 때, 부모 컴포넌트가 리렌더링 될 때 발생합니다. 컴포넌트가 업데이트되면 이전 상태와 새로운 상태 간의 비교가 이루어지고, 필요한 경우 UI가 렌더링이됩니다. 컴포넌트의 동작을 관리하고 필요한 작업을 수행하는 단계입니다. 

 

<주요메서드>

1. shouldComponentUpdate

• props 또는 state를 변경했을 때, 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드입니다.
• 반드시 true/falsle 값을 반환해야 하며, false일 경우 업데이트 과정은 중단됩니다.

 

2. render

• 컴포넌트를 리렌더링 합니다.

 

3. componentDidUpdate

• 리렌더링(업데이트) 작업이 완료된 직후에 호출되는 메서드입니다.
• 업데이트 이후에 필요한 작업을 수행합니다. 

2-3) 언마운트(Unmounting)

- 언마운트 단계는 컴포넌트가 DOM에서 제거되고 더 이상 사용되지 않을때 발생합니다. 다른페이지로 이동하거나 컴포넌트가 필요하지 않을때, 주로 리소스를 해제하거나 이벤트 리스너를 제거하는 등의 정리작업을 수행하는 단계입니다. 이를 통해 메모리 누수를 방지하고 애플리케이션의 성능을 향상시킬 수 있습니다. 

 

<주요메서드>

1. componentWillUnmount

• 컴포넌트가 언마운트되기 전에 호출되는 메서드로, 리소스를 정리하거나 이벤트 리스너를 제거하는 등의 작업을 수행합니다.