DOM은 html 단위 하나하나를 객체로 생각하는 모델로 트리구조이다.
가상돔은 메모리 상에서 돌아가는 가짜 DOM이다.기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교해서 정말 바뀐 부분만 갈아끼워준다.
DOM을 새로 그리는 상황: 처음 페이지 진입했을 때, 데이터 변했을 때
컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지의 과정
[mount]
처음으로 컴포넌트를 불러오는 단계
[update]
사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트
[unmount]
페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계
라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.
라이프 사이클 함수가 어떤 순서로 움직이는 지 알아보자!
라이프 사이클 예제)
import React from "react";
// 클래스형 컴포넌트
// React.Component가 부모.
class LifecycleEx extends React.Component {
// 생성자 함수: 초기값을 설정
constructor(props) {
super(props);
this.state = {
cat_name: '나비',
};
console.log('in constructor!');
}
changeCatName = () => {
// 다음 강의에서 배울, state 업데이트 하는 방법입니다!
// 지금은 componentDidUpdate()를 보기 위해 쓰는 거니까, 처음보는 거라고 당황하지 말기!
this.setState({cat_name: '바둑이'});
console.log('고양이 이름을 바꾼다!');
}
componentDidMount(){
console.log('in componentDidMount!');
}
componentDidUpdate(prevProps, prevState){
console.log(prevProps, prevState);
console.log('in componentDidUpdate!');
}
componentWillUnmount(){
console.log('in componentWillUnmount!');
}
// 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
render() {
console.log('in render!');
return (
<div>
{/* render 안에서 컴포넌트의 데이터 state를 참조할 수 있습니다. */}
<h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
<button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
</div>
);
}
}
export default LifecycleEx;
constructor()
생성자 함수. 컴포넌트가 생성되면 가장 먼저 호출
render()
컴포넌트의 모양을 정의
componentDidMount()
첫번째 렌더링을 마친 후에만 딱 한 번 실행된다. 컴포넌트가 리렌더링할 때는 실행되지 않음.
ajax 요청, 이벤트 등록, 함수 호출 등 작업을 처리
componentDidUpdate(prevProps, prevState, snapshot)
DidUpdate()는 리렌더링을 완료한 후 실행되는 함수
파라미터가 2개 있는데, prevProps와 prevState이다. 각각 업데이트 되기 전 props, state을 뜻함.
componentWillUnmount()
컴포넌트가 DOM에서 제거 될 때 실행하는 함수
삼항연산자를 사용해서 컴포넌트를 보여주거나, 없애는 걸 조건부 렌더링이라고 한다.