component lifecycle(<16.3이전)

React

component lifecycle(<16.3이전)

youngseokim_kr 2021. 11. 20. 18:53

component 생성 및 마운트

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatoble" content="ie=edge" />
  <title>Example</title>
</head>
<body>
  <div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    console.log(React);
    console.log(ReactDOM);
    
    class App extends React.Component {
      state = {
        age:39,
      };
      constructor(props) {
        super(props);

        console.log("constructor", props);
      }
      render() {
        console.log('render');
        return (
          <div>
            <h2>
              Hello {this.props.name}  {this.state.age}
            </h2>
          </div>
        );
      }
      componentWillMount() {
        console.log('componentWillMount');
      }
      componentDidMount() {
        console.log('componentDidMount');

        setInterval(() => {
          //console.log("setInterval");
          this.setState(state => ({...state,age: state.age+1}))
        },1000)
      }
    }

    ReactDOM.render(<App name="Mark" />, document.querySelector("#root"))
    
  </script>
  </body>
</html>

component props, state 변경

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatoble" content="ie=edge" />
  <title>Example</title>
</head>
<body>
  <div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    console.log(React);
    console.log(ReactDOM);
    
    class App extends React.Component {
      state = {
        age:39,
      };
      constructor(props) {
        super(props);

        console.log("constructor", props);
      }
      render() {
        console.log('render');
        return (
          <div>
            <h2>
              Hello {this.props.name}  {this.state.age}
            </h2>
          </div>
        );
      }
      componentWillMount() {
        console.log('componentWillMount');
      }
      componentDidMount() {
        console.log('componentDidMount');

        setInterval(() => {
          //console.log("setInterval");
          this.setState(state => ({...state,age: state.age+1}))
        },1000)
      }

      componentWillReceiveProps(nextProps) {
        console.log("componentWillReceiveProps",nextProps);
      }

      shouldComponentUpdate(nextProps,nextState) {
        console.log("shouldComponentUpdate",nextProps,nextState);

        return true;
      }

      componentWillUpdate(nextProps,nextState) {
        console.log("componentWillUpdate",nextProps,nextState);
      }

      componentDidUpdate(prevProps,prevState) {
        console.log("componentDidUpdate",prevProps,prevState);
      }
    }


    ReactDOM.render(<App name="Mark" />, document.querySelector("#root"))
    
  </script>
  </body>
</html>

componentWillReceiveProps

props 를 새로 지정했을 때 바로 호출

여기는 state 의 변경에 반응하지 않는다.

여기서 props 의 값에 따라 state 를 변경해야 한다면,

setState 를 이용해 state 를 변경합니다.

그러면 다음 이베느로 각각 가는것이 아니라 한번에 변경

ShouldComponentUpdate

props 만 변경되도 state 만변경되어도 props& stae 둘다 변경되도

newProps 와 new State를 인자로 해서 호출

return type 이 boolean 입니다. true 면 render false면 render 가 호출되지 않는다.

이 함수를 구현하지 않으면 디폴트는 true

componentWillUdate

컴포넌트가 재 랜더링 되기 직전에 불리고 여기서 setstate 같은 것을 쓰면 안된다.

componentDidUpdate

컴포넌트가 재 랜더링을 마치면 불립니다.

component 언마운트

저작자표시 비영리 변경금지 (새창열림)