[React.js] 컴포넌트의 라이프사이클 정리

컴포넌트 라이프 사이클은 크게 Mouting -> Updating -> Unmounting으로 구분이 가능하고

각 단계에 호출될 수 있는 메소드들도 존재합니다.

컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입되는 단계입니다. Mounting은 Lifecyle이 종료될 때까지 한 번만 일어납니다. 아래 메서드들이 이 단계에서 순서대로 호출됩니다.

· constructor: 컴포넌트의 인스턴스를 새로 만들 때마다 생성자 메서드가 호출됩니다.

· render: 화면에 표현될 JSX를 반환하고 화면에 그립니다.

· componentDidMount: 컴포넌트가 화면에 모두 그려진 이후 호출됩니다.

componentDidMount 메서드는 첫 렌더링 이후 실행됩니다. 엔드포인트에서 클라이언트로 데이터를 불러와야 하는 경우라면, API 호출을 하기 좋은 위치입니다. 데이터를 받아 올 때 setState 메서드를 이용하여 컴포넌트를 업데이트할 수 있습니다.

props 또는 state가 변경되어 컴포넌트가 업데이트되는 단계입니다.

· render: 데이터가 변경되면 자동으로 호출됩니다. 화면을 다시 그립니다.

· componentDidUpdate: 화면이 다시 그려진 이후 호출됩니다.

컴포넌트가 DOM 상에서 제거되는 단계입니다.

·componentWillUnmount: 컴포넌트가 화면에서 제거되기 전에 호출됩니다.

한발짝