컴포넌트 생명주기
1. Mounting
Constructor()
constructor는 자바스크립트에서 class를 만들 때 호출되는 것이다.
컴포넌트가 마운트 될 때, 컴포넌트가 스크린에 표시될 때, 컴포넌트가 웹사이트로 갈 때 constructor를 호출한다. 컴포넌트의 인스턴스를 새로 만들 때마다 생성자 메서드가 호출된다.render()
화면에 표현될 JSX를 반환하고 화면에 그린다.componentDidMount()
컴포넌트가 화면에 모두 그려진 이후 호출된다.componentDidMount메서드는 첫 렌더링 이후 실행된다. 엔드포인트에서 클라이언트로 데이터를 불러와야 하는 경우, API호출을 하기 좋은 위치
Mounting단계는 부모 컴포넌트의 constructor호출되고 render가 호출된 다음 자식 컴포넌트의 constructor,render가 호출된다. 만약 부모컴포넌트와 자식 컴포넌트 모두 componentDidMount 메서드를 호출한다면 자식 컴포넌트에서 먼저 호출된다.
1.부모 constructor
2.부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
3.자식 constructor
4.자식 render
5.자식 componentDidMount (여기까지 하고 부모 컴포넌트로 다시 넘어감)
6.부모 componentDidMount
2. Updating
props,state가 변경되어 컴포넌트가 업데이트되는 단계이다. 아래 메서드들이 순서대로 호출된다.
render()
데이터가 변경되면 자동으로 호출된다. 화면을 다시 그린다.componentDidUpdate
화면이 다시 그려진 이후 호출된다.
마운트 단계에서 componentDidMount 메서드 호출 시 setState를 통해 컴포넌트를 업데이트 시켰다.
7.부모 fetch 완료 (setState 발생 > 업데이트 발생 > 다시 render)
8.부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
9.자식 render
10.자식 componentDidUpdate
(componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate발생. 여기까지하고 다시 부모로 넘어감
11.부모 componentDidUpdate
(componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생)
3. Unmounting
컴포넌트가 DOM상(화면)에서 제거되는 단계이다.
componentWillUnmount
컴포넌트가 화면에서 제거되기 전에 호출된다.
