[React] 기초부터 배우는 React : Life Cycle

CRA로 리액트 프로그램을 작성했다면 직접 HTML파일을 작성할 일이 없을 것이다.JSX 문법을 통해서 HTML과 비슷한 형태로 작성을 하고, 그 파일을 리액트가 HTML로 변환시켜 렌더링을 시킨다.

• 컴포넌트가 렌더링 된 직후 setState를 하고 싶다면 어디다가 로직을 작성해야 할까요?
• 컴포넌트가 업데이트 된 직후 어떤 부분이 업데이트 되었는지 체크하고 싶다면 어디다 그 로직을 작성해야 할까?

위 질문은 라이프 사이클에 대한 이해 없이는 해결할 수 없다. 만약 리액트로 프로그램을 만든 뒤, 그 사이트를 접속해보면 처음에는 아무것도 없는 빈 화면이 반겨준다. 그후 자바스크립트가 로딩이 완료되면서 우리가 작성한 JSX파일이 보이기 시작한다. 이번 포스트에서는 그 타이밍에 대해서 알아보자.

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Mountung:리액트 코드 첫 렌더링의 시작

리액트 코드가 HTML로 변환되어서 첫 렌더링이 되는 부분을 나타낸다. 더 쉽게 말하자면, 리액트로 만들어진 웹 페이지에 접속했을때 브라우저에 HTML이 나타나기까지의 과정이다. 리액트 컴포넌트 클래스에서는 아래와 같은 과정을 거친다.

• constructor: 리액트 컴포넌트 클래스를 만들어도, 클래스의 기본 특성은 생성자가 먼저 실행된다. 당연히, 생성자가 가장 먼저 동작한다.

• render: 렌더링을 위해 작성해둔 JSX를 return해주는 메소드가 작동한다. 아직 이 단계에서는 브라우저에 아무것도 존재하지 않는다.

• componentDidMount: 리액트 코드가 HTML로 변환되어 화면에 나타났다. document.getElementById를 통해 선택자를 통해서 DOM요소를 가져올 수 있게 되었다. 여기에 DOM에 HTML코드가 업데이트 된 직후 수행해야 하는 작업을 수행한다. componentDidMount는 렌더링 직후 딱 한번만 수행된다.

  ❗️caution!

  리액트에서 실제 DOM의 요소를 가져오는 메소드를 수행하면 절대 안된다. 리액트에서는 DOM관리를 굉장히 보수적으로 수행한다. 실제 DOM관리를 위해서 ref라는 도구를 제공하는데, 이것을 사용해야 한다.

  Updating: 리액트의 state나 props가 업데이트 되었을때

  컴포넌트가 가지고 있는 props나 state가 업데이트 되었을 때에 수행되는 부분이다. props나 state가 업데이트 되는것을 리액트는 어떻게 감지할까?

• setState : state를 업데이트하려면 반드시 setState를 수행해야 한다.
  리액트는 이 메소드가 수행되엇을때 컴포넌트를 업데이트한다.

• props가 업데이트 되었을때, 부모 컴포넌트에서 setState를 수행해 현재 컴포넌트가 가지고 있는 props가 업데이트 되었을때에도 리액트 컴포넌트는 업데이트된다.

• render: state나 props, 즉 보여주어야 하는 데이터가 업데이트 되었으면 다시 render를 수행해야 한다.

• componentDidUpdate: 컴포넌트가 업데이트 되었을때에 수행되는 메소드로 인자를 받는다. prevProps와 prevState가 이 역할을 수행하는 것이다. 현대 업데이트 된 props와 업데이트 되기전 props, 업데이트 되기 전 state와 현재 업데이트된 state를 비교해서 원하는 작업을 수행할 수 있다.

  Unmounting: 컴포넌트가 사라질때

  컴포넌트에 setInterval과 같은 작업을 진행했을때에 이 부분은 컴포넌트가 단순히 사라진다고 해서 없어지지 않는다. 메모리에 좀비처럼 상주할 가능성이 있는 변수들을 여기에서 null로 할당함으로써 사용되지 않을 작업들을 해제할 수 있다.

• componentWillUnMount: 컴포넌트가 사라질 때에만 수행하게 된다. setInterval과 같은 작업을 했을 경우 여기서 해체시켜주면 된다.

  import React from "react";
  import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
constructor(props) {
super(props);
console.log("constructor: 클래스의 시작");
this.state = {
helloLifeCycle: "helloLifeCycle"
};
}

componentDidMount() {
console.log("componentDidMount: 첫 렌더링이 완료됨");
console.log("------------업데이트를 시작할게요 ---------------");
console.log("setState 진행");
this.setState({
helloLifeCycle: "updated"
});
}

componentDidUpdate(prevProps, prevState) {
console.log("componentDidUpdate: 컴포넌트가 업데이트 됨");
// 업데이트 된 후의 현재 state
console.log(this.state, "업데이트 후");
// 업데이트 되기 전 state
console.log(prevState, "업데이트 전");
}

componentWillUnmount() {
console.log("componentWillUnMount");
console.log("이 친구는 창 닫으면 동작해서 보실 순 없어요 ..");
}

render() {
console.log("render: 나는 렌더링을 합니다.");
return (

  <div className="App">
    <h1>Hello CodeSandbox</h1>
    <h2>Start editing to see some magic happen!</h2>
  </div>
);

}
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

---
## 출처 
[기초부터 배우는 리액트](https://berkbach.com/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-js-1531b18f7bb2)