웹 프론트/React

리액트[React] - 생명주기(LifeCycle) 기초 설명 및 다운로드

2017. 10. 15. 18:19

React[리액트]- 생명주기(LifeCycle) 설명

 

① 리액트(React)에서는 Props, State값이 변화 될 때 컴포넌트(Component)에 많은 변화가 일어난다.

② 컴포넌트(Component) 생성, 업데이트, 제거 될 때 일어난다.

③ 리액트(React) 에서는 DOM 혹은 페이지에 올라갈 때를 마운트(Mount), 그 반대는 언마운트(Unmount) 라고 정의한다.


 

React Life Cycle

    React에서는 아래 그림과 같은 생명주기(LifeCycle)을 원칙으로 한다.

 

 

React 생명주기(LifeCycle) 예제 코드

 

main.js

 

1
2
3
4
5
6
7
8
9
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(<App/>, document.getElementById('root'));
 
setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('root'));}, 4000); //4초 후에 Unmount
 
Colored by Color Scripter
cs

 

 

App.js

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React from 'react';
 
class App extends React.Component {
 
   constructor(props) {
      super(props);
 
      this.state = {
         number: 0
      }
   };
 
   increaseNumber() {
      this.setState({number: this.state.number + 1})
   }
 
   render() {
      return (
         <div>
            <button onClick = {this.increaseNumber.bind(this)}>증가</button>
            <Content curNumber = {this.state.number}></Content>
         </div>
      );
   }
}
 
class Content extends React.Component {
 
   componentWillMount() {
      console.log('Component WILL MOUNT!')           //컴포넌트 마운트 전
   }
 
   componentDidMount() {
      console.log('Component DID MOUNT!')            //컴포넌트 마운트 후 (Render 실행 완료)
   }
 
   componentWillReceiveProps(newProps) {
      console.log('Component WILL RECIEVE PROPS!')   //새로운 Props 받은 후
   }
 
   shouldComponentUpdate(newProps, newState) {       //True : 렌더링 O, False : 랜더링 X
      //console.log(newProps, newState)
      return true;
   }
 
   componentWillUpdate(nextProps, nextState) {       //컴포넌트 업데이트 전
      console.log('Component WILL UPDATE!');
   }
 
   componentDidUpdate(prevProps, prevState) {        //컴포넌트 업데이트 후 (Render 실행 완료)
      console.log('Component DID UPDATE!')
   }
 
   componentWillUnmount() {                          //컴포넌트 언마운트 전
      console.log('Component WILL UNMOUNT!')
   }
 
   render() {
      return (
         <div>
            <h3>{this.props.curNumber}</h3>
         </div>
      );
   }
}
 
export default App;
 
Colored by Color Scripter
cs

 

 

React[리액트] - 예제 소스 실행

 

브라우저 및 Console 화면

     웹팩Webpack을 사용하면 더욱 편하게 실행 가능하다.

 

 

React[리액트] - 예제 소스(파일) 다운로드

 

다운로드

react-lifecycle.zip

 

  웹팩(webpack)을 추가적으로 공부해보자. 정말 편하게 개발 할 수 있을 것이다.


 


저작자표시 동일조건 (새창열림)

'웹 프론트 > React' 카테고리의 다른 글

리액트[React] - 현재 시간 표시 및 실시간 시계(live-clock) 만들기  (4) 2018.02.28
리액트[React] - ES6 문법 + Babel 기초 예제 및 다운로드  (0) 2018.01.06
리액트[React] - 라우터(Router) 기초 설명 및 다운로드  (0) 2017.10.17
'웹 프론트/React' 카테고리의 다른 글
  • 리액트[React] - 현재 시간 표시 및 실시간 시계(live-clock) 만들기
  • 리액트[React] - ES6 문법 + Babel 기초 예제 및 다운로드
  • 리액트[React] - 라우터(Router) 기초 설명 및 다운로드
[좋은사람]
[좋은사람]
좋은사람의 개발 노트 입니다.
[좋은사람]
좋은사람의 개발 노트
[좋은사람]
전체
오늘
어제
  • 전체보기 (189)
    • 언어 (68)
      • Java (12)
      • Python (39)
      • C# (5)
      • PHP (4)
      • Go (8)
    • OS (18)
      • Linux (7)
      • Windows 10 (5)
      • Etc (6)
    • 빅데이터 & 분석 (8)
      • R (0)
      • Machine Learning (8)
    • 네트워크 (4)
      • Etc (4)
    • 웹 프론트 (25)
      • Javascript & ECMA (8)
      • Vue (13)
      • React (4)
    • 웹 백엔드 (15)
      • Spring (3)
      • Django & Flask (7)
      • Npm & Express (5)
    • 개발도구 (18)
      • Jetbrains (3)
      • Eclipse (5)
      • Git (4)
      • Atom & VScode (6)
    • 데이터베이스 (7)
      • Oracle (2)
      • MariaDB & MySQL (2)
      • Etc (3)
    • 모바일 (6)
      • Android (3)
      • Hybrid (3)
    • 라이프 (20)
      • 여행 & 일상 (6)
      • 취미 (14)

블로그 메뉴

  • 홈으로
  • 블로그소개
  • 태그
  • 방명록

공지사항

인기 글

태그

  • nodejs
  • windows10
  • 인텔리j
  • 코딩 면접
  • 미뮤
  • OCR
  • Linux
  • ubuntu
  • Java
  • ATOM
  • Algorithm
  • SpringSTS
  • flask
  • python
  • Eclipse
  • 2DS
  • 머신러닝
  • 윈도우10
  • npm
  • Database
  • centos
  • 커펌
  • 아톰 에디터
  • Git
  • Django
  • 이클립스
  • go
  • 리액트
  • Anaconda
  • ps4
  • javascript
  • 개발자 면접
  • Thread
  • react
  • vue.js
  • 디자인패턴
  • php
  • CFW
  • 3DS
  • C#

최근 댓글

최근 글

hELLO · Designed By 정상우.
[좋은사람]
리액트[React] - 생명주기(LifeCycle) 기초 설명 및 다운로드
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.