반응형
1. 클래스형 컴포넌트의 일생 알아보기
- constructor() 함수 알아보기
App.js 파일 실행, 기존에 있는 코드에 그래도 사용하면 된다.
class App extends React.Component {
constructor(props) {
super(props);
console.log('hello');
}
.
.
.
render() {
console.log('render');
return (
<div>
<h1>The numbe....
클래스형 컴포넌트에 constructor() 함수와 console.log()에 아무 문장이나 출력한다.
render() 함수에도 console.log() 아무 문장이나 출력해보자.
어떤 함수가 먼저 실행되는지 본다.
개발자도구의 Console 탭을 보자.
constructor() 함수안의 console.log() 가 먼저 실행된다.
중요한것은 함수의 실행순서.
함수의 실행 순서만 알아로 리액트 앱 만들때 무슨 작업을 할지 결정할 수 있음.
- componentDidMount() 함수 알아보기
class App extends React.Component {
.
.
.
componentDidMount() {
console.log('component rendered');
}
.
.
.
render() {
console.log("i'm rendering"); <---- " 따옴표 주의
return (
<div>
<h1>The numbe....
App 클래스안 아무대나 componentDidMount() 함수를 써주고,
console.log() 에 문장을 써준다.
- 실행 순서 -
- constructor() 함수
- render() 함수
- componentDidMount() 함수
- componentDidUpdate() 함수 알아보기
class App extends React.Component {
.
.
.
componentDidUpdate() {
console.log('i just updated');
}
.
.
.
render() {
console.log("i'm rendering"); <---- " 따옴표 주의
return (
<div>
<h1>The numbe....
componentDidUpdate() 함수는 화면이 업데이트되면 실행된다.
앞서 만든 숫자 증감 앱에서 Add나 Minus 버튼 눌러서 setState() 함수가 실행되면
자동으로 render() 함수가 실행되면서 화면이 업데이트 된다.
- componentWillUnmount() 함수 알아보기
이 함수는 컴포넌트가 죽을 때를 말한다.
class App extends React.Component {
.
.
.
componentWillUnmount() {
console.log('Goodbye, world');
}
.
.
.
render() {
console.log("i'm rendering"); <---- " 따옴표 주의
return (
<div>
<h1>The numbe....
아직은 컴포넌트가 화면에서 떠나게 만드는 코드를 작성한 적이 없다.
다음에서 천천히 알아본다.
여기까지가 클래스형 컴포넌트에서 실행되는 생명주기 함수다.
반응형
'Project > REACT' 카테고리의 다른 글
14 - 영화 앱 만들기 (0) | 2020.12.20 |
---|---|
13 - 영화 앱 만들기 워밍업 (0) | 2020.12.18 |
11 - state와 클래스형 컴포넌트(1) (0) | 2020.12.17 |
10 - 발전된 컴포넌트 만들기(2) (0) | 2020.12.10 |
9 - 발전된 컴포넌트 만들기(1) (0) | 2020.12.10 |
댓글