컴포넌트 라이프 사이클

컴포넌트가 생성되고 소멸되는 일련의 과정을 말한다. 이 과정에서 수행하는 작업을 제어하고 상태를 관리한다. 컴포넌트는 일반적으로 UI의 일부를 나타내기 위해 만들어졌다. 그래서 페이지의 이동이나 컴포넌트가 필요하지 않을 때는 자동으로 소멸된다. 라이프 사이클은 자동으로 작동되고 필요에 따라 오버라이딩이 가능하다.

컴포넌트 라이프 사이클은 3단계 사이클을 겪는다.

Mounting (생성)

사용자가 페이지로 접근하면 컴포넌트가 생성된다.

constructor

컴포넌트가 생성될 때 호출되는 생성자 메서드다. 컴포넌트 초기 상태를 설정한다.

static getDerivedStateFromProps

부모 컴포넌트가 자식 컴포넌트에게 props를 전달할 때마다 호출된다. State를 업데이트 할 때 사용한다.

render

컴포넌트가 DOM에 마운트 될 때 호출된다. JSX를 반환한다.

componentDidMount

render 메서드가 호출되어 DOM에 컴포넌트가 마운트 된 후 호출된다. 외부 데이터를 가져오거나 DOM 노드에 접근할 때 사용한다.

Updating (업데이트)

사용자가 상태를 업데이트 하면 발생하는 상태다.

static getDerivedStateFromProps

Mounting 단계와 같은 역할을 한다.

shouldComponentUpdate

컴포넌트를 업데이트 해야 할 지 결정하는 메서드다. 업데이트를 결정하면 true, 그렇지 않으면 false를 반환하여 업데이트를 방지한다.

render

컴포넌트가 업데이트 될 때 호출되어 변화된 JSX 코드를 반환한다.

getSnapshotBeforeUpdate

컴포넌트가 업데이트 되기 직전에 호출되어 DOM 노드에 직접 접근할 수 있는 기회를 제공한다.

componentDidUpdate

컴포넌트가 업데이트 된 직후 호출되고, 업데이트 된 후의 DOM 상태를 사용하여 이전 상태와 비교한다.

Unmounting (소멸)

사용자가 페이지를 이동하거나 컴포넌트를 사용하지 않을 경우 발생하는 단계다.

componentWillUnmount

컴포넌트가 언마운트 되기 전에 호출된다. 이벤트 리스너를 제거하거나 타이머를 중지시킨다.

정리하기

컴포넌트 라이프 사이클에 대해 간단하게 공부했다. 사용자를 중심으로 돌아가는 것을 기억해야하고, 페이지의 이동에 따라 컴포넌트가 생성되고 소멸되는 것을 잊지말아야겠다.