CRA로 리액트 프로그램을 작성했다면 직접 HTML파일을 작성할 일이 없을 것이다.JSX 문법을 통해서 HTML과 비슷한 형태로 작성을 하고, 그 파일을 리액트가 HTML로 변환시켜 렌더링을 시킨다.
setState
를 하고 싶다면 어디다가 로직을 작성해야 할까요? 위 질문은 라이프 사이클에 대한 이해 없이는 해결할 수 없다. 만약 리액트로 프로그램을 만든 뒤, 그 사이트를 접속해보면 처음에는 아무것도 없는 빈 화면이 반겨준다. 그후 자바스크립트가 로딩이 완료되면서 우리가 작성한 JSX파일이 보이기 시작한다. 이번 포스트에서는 그 타이밍에 대해서 알아보자.
http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
리액트 코드가 HTML로 변환되어서 첫 렌더링이 되는 부분을 나타낸다. 더 쉽게 말하자면, 리액트로 만들어진 웹 페이지에 접속했을때 브라우저에 HTML이 나타나기까지의 과정이다. 리액트 컴포넌트 클래스에서는 아래와 같은 과정을 거친다.
constructor: 리액트 컴포넌트 클래스를 만들어도, 클래스의 기본 특성은 생성자가 먼저 실행된다. 당연히, 생성자가 가장 먼저 동작한다.
render: 렌더링을 위해 작성해둔 JSX를 return해주는 메소드가 작동한다. 아직 이 단계에서는 브라우저에 아무것도 존재하지 않는다.
componentDidMount: 리액트 코드가 HTML로 변환되어 화면에 나타났다. document.getElementById
를 통해 선택자를 통해서 DOM요소를 가져올 수 있게 되었다. 여기에 DOM에 HTML코드가 업데이트 된 직후 수행해야 하는 작업을 수행한다. componentDidMount는 렌더링 직후 딱 한번만 수행된다.
❗️caution!
리액트에서 실제 DOM의 요소를 가져오는 메소드를 수행하면 절대 안된다. 리액트에서는 DOM관리를 굉장히 보수적으로 수행한다. 실제 DOM관리를 위해서 ref라는 도구를 제공하는데, 이것을 사용해야 한다.
컴포넌트가 가지고 있는 props나 state가 업데이트 되었을 때에 수행되는 부분이다. props나 state가 업데이트 되는것을 리액트는 어떻게 감지할까?
setState : state를 업데이트하려면 반드시 setState를 수행해야 한다.
리액트는 이 메소드가 수행되엇을때 컴포넌트를 업데이트한다.
props가 업데이트 되었을때, 부모 컴포넌트에서 setState를 수행해 현재 컴포넌트가 가지고 있는 props가 업데이트 되었을때에도 리액트 컴포넌트는 업데이트된다.
render: state나 props, 즉 보여주어야 하는 데이터가 업데이트 되었으면 다시 render를 수행해야 한다.
componentDidUpdate: 컴포넌트가 업데이트 되었을때에 수행되는 메소드로 인자를 받는다. prevProps와 prevState가 이 역할을 수행하는 것이다. 현대 업데이트 된 props와 업데이트 되기전 props, 업데이트 되기 전 state와 현재 업데이트된 state를 비교해서 원하는 작업을 수행할 수 있다.
컴포넌트에 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)