리액트 복습 - 라이프 사이클
Life Cycle
리액트 클래스 컴포넌트는 단순히 render 함수 말고 더 많은 것을 가지고 있다.
우선 컴포넌트가 생성 될 때, render 함수가 실행되기 전, 호출되는 몇 가지 function이 있다.
반대로 컴포넌트가 render 된 후, 호출되는 다른 function들이 존재한다.
그리고 컴포넌트가 update 된 후, 호출되는 function도 존재한다.
이 들을 life cycle method라고 부른다.
Mounting
Mounting을 쉽게 말하면 component'태어나는 것'을 의미한다.
먼저 클래스 생성 함수 constructor는 컴포넌트가 mount(시작)될 때, 화면에 표출 될 때, Website에 갈 때, 실행 된다.
그다음 render 함수가 실행 되어 컴포넌트를 렌더링 해준다.
componentDidMount는 render 함수가 실행 된 뒤, 마지막으로 실행된다.
import { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
console.log("constructor");
}
state = {
count: 0,
};
add = () => {
this.setState((current) => ({ count: current.count + 1 }));
};
minus = () => {
this.setState((current) => ({ count: current.count - 1 }));
};
componentDidMount() {}
render() {
console.log("render");
return (
<div>
<h1>The number is : {this.state.count}</h1>
<button onClick={this.add}>Add</button>
<button onClick={this.minus}>minus</button>
</div>
);
}
}
export default App;
리액트 실행 -> constructor -> render -> componentDidMount
Updating
Updating은 리액트에서 일반적인 업데이트가 일어남을 의미한다.
setState로 state 변경이 일어나면 우선 render 함수가 실행 되고
이후로 componentDidUpdate 함수가 실행된다.
import { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
console.log("constructor");
}
state = {
count: 0,
};
add = () => {
this.setState((current) => ({ count: current.count + 1 }));
};
minus = () => {
this.setState((current) => ({ count: current.count - 1 }));
};
componentDidMount() {
console.log("componentDidMount");
}
componentDidUpdate() {
console.log("componentDidUpdate");
}
render() {
console.log("render");
return (
<div>
<h1>The number is : {this.state.count}</h1>
<button onClick={this.add}>Add</button>
<button onClick={this.minus}>minus</button>
</div>
);
}
}
export default App;
state변경(setState 실행) -> render -> componentDidUpdate
Unmounting
Unmounting은 쉽게 말하면 컴포넌트가 죽는 걸, 떠나는 걸 의미 한다.
컴포넌트가 어떻게 죽냐면 페이지를 바꿀때 or state를 이용해서 렌더 되는 컴포넌트를 바꿀때가 해당 된다.
이때 componentWillUnmount 함수가 실행 된다.
예를 들어서
isLogin이라는 state의 값이 false라면 Login 컴포넌트를,
true라면 MyPage 컴포넌트를 렌더하는 삼항 연산자가 있을 경우
render(){
return(
<div>
{isLogin?<Mypage/>:<Login/>}
</div>
)
}
isLogin이 setState로 기본값 false에서 true로 변경 될 때,
Login 컴포넌트에서 MyPage 컴포넌트로 변경 되면서, Login 컴포넌트가 죽었기에
componentWillUnmount 함수가 실행된다.
Author And Source
이 문제에 관하여(리액트 복습 - 라이프 사이클), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@woals3000/리액트-복습-라이프-사이클저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)