[React JS] 리액트 컴포넌트 라이프사이클(Component Lifecycle)에 대하여

// Render: componentWillMount() -> render() -> componentDidMount()

다음의 사이클은 자동으로 발생함 (원하든 원하지 않든)

 

컴포넌트 라이프사이클

 

[F12] 콘솔창 확인

컴포넌트가 '존재'하기 시작하면

will mount -> did render -> did mount

 

예시) 영화앱 제작 시, will mount를 진행할 때 API에 작업 요청

해당 작업 수행이 완료되면, 그 다음에 데이터 관련된 작업 진행

 

 

정리

will mount를 보면 사이클이 시작되었음을 알 수 있음

render를 보면 컴포넌트가 리액트 세계에 '존재'하게 되었음을 알게 됨

did mount를 보면 성공적으로 리액트 세계에 컴포넌트가 자리잡았음을 알게 됨

 

 

// Update: componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() -> render() -> componentDidUpdate()

 

 

관련 강좌. 출처

https://www.inflearn.com/course/reactjs-web/

리액트 처음이시라구요? React JS로 웹 서비스 만들기! - 인프런