Hello World...

React 생명 주기 본문

react.js

React 생명 주기

FaustK 2020. 1. 20. 17:45

리액트 생명 주기를 공부해봤는데, 여전히 아리송하기는 하다. 

리액트 생명주기 : 컴포넌트가 생성되고, 업데이트 되고 사라질 때 '항상' 보장된 타이밍에 실행되는 메서드

 

노마드 코더- 리액트 강좌 영상에서 자세하게 설명해 주셔서, 해당 내용을 참고하였다. 

 

https://www.youtube.com/watch?v=ycOQk7SZWkM&feature=emb_logo

 

 

 

영상과는 조금 다르게 브라우저에서 리액트를 실행시켜서 확인을 해보았다.

 

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class App extends React.Component {
        constructor(props) {
          console.log('constructor~~');
          super(props);
          this.state = {
            number: 0
          };
 
          // 화살표 함수를 사용하지 않으면 bind 를 constructor 안에 해주어야 한다.
          this.add = this.add.bind(this);
        }
 
        add() {
          this.setState(prev => ({ number: prev.number + 1 }));
        }
 
        minus = () => {
          this.setState(prev => ({ number: prev.number - 1 }));
        };
 
        componentDidMount() {
          console.log('component did Mount~~');
        }
 
        componentDidUpdate() {
          console.log('component did Update~~');
        }
 
        componentWillUnmount() {
          // 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.
          // 컴포넌트가 DOM 상에서 삭제될 때 실행된다고 한다.
        }
        render() {
          console.log('i am rendering~');
          return (
            <div>
              <p>number is a : {this.state.number}</p>
              <button onClick={this.add}>add</button>
              <button onClick={this.minus}>miuns</button>
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.querySelector('#root'));
    </script>
  </body>
</html>
 cs

 

 

 

 

처음 실행시켜보면 

consturctor => render => componentDidMount 순으로 실행되는 것을 확인 할 수 있다.

 

버튼을 클릭하면 setState() ⇒ render → componentDidUpdate 순으로 실행되는 것을 알 수 있다.

공식문서에도 나와있지만 리액트는 스테이트가 변경되면 render를 다시 호출한다. 

https://ko.reactjs.org/docs/react-component.html

 

React.Component – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

생명주기 도표

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

React Lifecycle Methods diagram

Fully interactive and accessible React Lifecycle Methods diagram.

projects.wojtekmaj.pl

 

 

응용

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            isLodding: true
          };
        }
 
        componentDidMount() {
          setTimeout(() => {
            console.log('did');
            this.setState({ isLodding: false });
          }, 3000);
        }
 
        render() {
          const { isLodding } = this.state;
          return <div> {isLodding ? 'Lodding' : 'welcome~'}</div>;
        }
      }
 
      ReactDOM.render(<App />, document.querySelector('#root'));
    </script>
  </body>
</html>
 
 cs

 

 

최초 Lodding 이 나온 후 3초 뒤에 welcom~이 나타난다

 

 

fetch 같은 비동기 함수는 componentDidMount() 메서드에 작성하는 것이 좋다.

만약 사용자가 페이지에 접속했을 때 fetch 작업이 10초 정도 걸린다고 하자. 

그렇다면 사용자는 기다리지 않고 페이지를 떠날 것이다. 

10초 정도 걸려도 일단 페이지를 렌더링하면 UX 적인 부분에서 이점이 생긴다. 

 

 

 

참고)

https://www.youtube.com/watch?v=ycOQk7SZWkM&feature=emb_logo

https://github.com/ZeroCho/react-webgame/blob/master/1.%EA%B5%AC%EA%B5%AC%EB%8B%A8/Gugudan-class.html

'react.js' 카테고리의 다른 글

react proxy 리액트 프록시 cors 문제 해결  (0) 2020.04.15
fetch 사용시 credentilas  (0) 2020.04.08
html input tag type "datetime-local" 날짜와 시간  (0) 2020.02.01
recast.ly 에서 ref 활용  (0) 2020.01.28
recast.ly 구조  (0) 2020.01.28
'react.js' Related Articles more
Comments