리액트(ReacJS)의 컴포넌트 라이프사이클API - (1) Mount API

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻

 

예전에는 각종 프레임워크의 라이프 사이클(=생명주기)의 개념만 이해하기 급했고, 실제 코딩하면서 사용할 생각은 하지 않았었다. 아마 나의 무지함 때문에 적절하게 사용하지 못했을 수도 있었을 것이고, 유용하고 좋은 기능이 있어도 그동안 진행했던 프로젝트에서는 필요 없었기 때문일 수도 있다. 라이프사이클 API에 대해 정확히 배운 것을 정리해서 이후 개인 프로젝트 진행 시 참고해야겠다.

우선, 전체적인 리액트의 라이프사이클은 다음과 같이 크게 Mount, Updating, Unmount 3가지로 나뉜다.

 

컴포넌트가 처음 실행될 때 관여하는 Mount api

 

constructor(props)

컴포넌트가 새로 만들어질 때마다 호출되는 생성자 함수이다. 이 함수 안에는 초기값을 지정할 수 있다.

 

static getDerivedStateFromProps

렌더링 직전에 호출되는 메소드이며 props로 받아온 값을 state값도 동기화해주는 경우에 사용한다. (자식 컴포넌트에서 사용)

nextProps는 변경될 값이고, prevState는 현재 값이다. 

 

render

props와 state 값을 활용하여 작성한 내용을 브라우저에 렌더링하는 메소드이다.

 

componentDidMount

컴포넌트가 render된 이후 호출된다. 주로 외부 API를 연동하거나, 서버에 데이터 요청을 위한 Ajax, DOM 속성을 읽거나 변경 작업 등의 동작을 여기서 수행한다. 컴포넌트가 mount되고 한 번 호출 된다.

처음에 생성자인 constructor가 호출되고, render() 함수를 통해 브라우저에 렌더링이 된 이후 componentDidMount가 실행되는 것을 확인할 수 있다.