[리액트 4] 기본개념 - 라이프사이클

// 그러면 react의 라이프사이클 메소드에 대해 알려주세요

React 컴포넌트의 라이프사이클은 크게 세 가지 단계로 나뉩니다: 마운트(mounting), 업데이트(updating), 언마운트(unmounting).

1. 마운트(Mounting)

마운트는 컴포넌트 인스턴스가 생성되어 DOM에 삽입되는 단계를 의미합니다. 여기에는 다음의 메서드들이 포함됩니다:

constructor(): 컴포넌트가 생성될 때 호출되는 메서드로, 초기 state를 설정하거나 이벤트 핸들러를 바인딩하는 등의 작업을 수행합니다.

render(): 컴포넌트가 어떤 것을 렌더링할지 결정하는 유일한 필수 메서드입니다. 이 메서드는 순수 함수여야 하며, state나 props를 변경하거나 부수 효과를 발생시키는 작업을 수행해서는 안 됩니다.

componentDidMount(): 컴포넌트가 DOM에 마운트된 직후에 호출되는 메서드로, 여기서 데이터를 불러오는 등의 작업을 수행합니다.

2. 업데이트(Updating)

업데이트는 props나 state가 변경될 때 발생하는 단계로, 다음의 메서드들이 포함됩니다:

render()

componentDidUpdate(): 컴포넌트가 업데이트된 직후에 호출되는 메서드로, 이 메서드 내에서 이전 props나 state와 현재 props나 state를 비교하여 필요한 작업을 수행할 수 있습니다.

3. 언마운트(Unmounting)

언마운트는 컴포넌트가 DOM에서 제거되는 단계를 의미하며, 다음의 메서드가 포함됩니다:

componentWillUnmount(): 컴포넌트가 언마운트되기 직전에 호출되는 메서드로, 여기서 타이머를 제거하거나 네트워크 요청을 취소하는 등의 정리 작업을 수행합니다.

이외에도 오류 처리를 위한 componentDidCatch() 등의 메서드가 있습니다. 그러나 React의 최신 버전에서는 Hook을 이용하여 함수형 컴포넌트에서도 이러한 라이프사이클을 처리할 수 있게 되었습니다. 예를 들어, useEffect Hook은 componentDidMount, componentDidUpdate, componentWillUnmount를 대체할 수 있습니다.

 

// useEffect 를 쓰자..