react component lifecycle

컴포넌트가 로딩되기 시작하는 Mounting

---

constructor 클래스 생성자

이것은 어찌보면 당연합니다. 어떤 클래스를 만들더라도 생성자보다 더 빨리 샐행되는 로직은 없기 때문입니다. 하지만 지금의 리액트에서는 생성자를 건드릴 일이 거의 없어졌기 때문에 가볍게 넘어가도록 하겠습니다. 아직 클래스 인스턴스가 막 실행된 시점이기 때문에 이 시점에는 브라우저에서 우리가 작성한 JSX가 보이지 않습니다.

 

 

실제 로딩이 이루어지는 render

constructor메소드가 실행된 이후에는 render 메소드가 실행됩니다. render메소드는 메소드 이름 자체로 어떤 일을 하는지 나타내고 있습니다. 이 메소드가 실행되면서 JSX가 HTML로 변환되어 우리가 보는 웹 브라우저에 나타나게 됩니다. 그러나 한가지 명심해야 할 점은, render메소드는 컴포넌트가 로딩될 때에도 실행되지만 컴포넌트의 데이터

(state, props)가 업데이트 되었을 때에도 동작한다는 점 입니다.

그렇기 때문에, render 메소드에서 setState나 props를 변화시키는 메소드를 가능하면 수행하지 않는 것을 추천합니다. (잘못하면 무한루프가 일어나게 되겠죠?)

 

 

처음 로딩이 끝난 뒤에 수행되는 componentDidMount

mounting의 마지막 부분입니다. render 메소드에 있는 모든 부분들이 브라우저에 나타나게 되었을 때만 실행되는 메소드 입니다. 컴포넌트의 데이터가 업데이트 되어도 이 메소드는 다시 수행되지 않습니다. 오직 초기 컴포넌트의 로딩 이후에 한번만 실행되는 라이프사이클 메소드 입니다. 이제 여기서 DOM을 직접 조작할 수 있게 됩니다. (하지만 리액트는 DOM조작을 직접 하지 않고도 많은 일을 할 수 있습니다.)

 

 

컴포넌트의 업데이트 Updating

---

리액트는 컴포넌트의 업데이트 감지를 오직 현재 컴포넌트에서 state나 props의 변경 유무로만 판단합니다.

 

state, props의 변경

위 그림에는 forceUpdate라고 해서 메소드가 하나 더 있는데요, 이는 강제로 재 렌더링을 하게 끔 도와주는 메소드 입니다. (하지만 코딩애플 강의에서는 다루지 않을게요.) 만약 우리가 setState를 이용해서 state를 하나 업데이트 했다고 가정해 봅시다. 그러면 다음에는 어떤 메소드가 수행될까요?

 

데이터가 변경이 되었으니 다시 render를 해야지 !

state의 변경이 일어났습니다. 리액트는 효율적으로 state의 변경사항을 감지해 다시 변경된 부분을 그려줍니다.

 

 

변경이 완료된 이후 수행되는 componentDidUpdate

컴포넌트의 변경이 완료되었을 때에 수행되는 메소드 입니다. 이 메소드는 조금 복잡한 작업을 수행하기에 최적화 되어있는 메소드 인데요, render메소드가 실행되어 업데이트 된 state, props와 업데이트 되기 전인 state, props를 가지고 비교 작업을 가능하게 해 줍니다.

 

 

컴포넌트의 삭제 Unmounting

---

컴포넌트에게 안녕을, componentWillUnmount

컴포넌트가 사라질 때에 수행되는 메소드 입니다. 여기서는 우리가 컴포넌트 내에 할당해 놓았던 여러가지 변수들을 해제시켜줄 수 있습니다. (setInterval, eventListener 같은 것들)

 

 

 

 

 

 

 

출처: https://ljh86029926.gitbook.io/coding-apple-react/2/undefined-1/what-is-life-cycle