React LifeCycle

2021. 5. 24. 15:20ยท ๐ŸŒ WEB/React
import React, { Component } from 'react';

class LifeCycleSample extends Component{
    state={
        error:false,
        number:0,
        color:null,
    }

myRef = null;

// ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค ๋•Œ ์ฒ˜์Œ์œผ๋กœ ์‹คํ–‰๋œ๋‹ค.
// ์ดˆ๊ธฐ state๋ฅผ ์ •ํ•œ๋‹ค.
constructor(props){

    super(props);
    console.log('constructor');
}

// props๋กœ ๋ฐ›์•„ ์˜จ ๊ฐ’์„ state์— ๋™๊ธฐํ™”์‹œํ‚ค๋Š” ์šฉ๋„
// ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋  ๋•Œ, ์—…๋ฐ์ดํŠธ๋  ๋•Œ ํ˜ธ์ถœ
static getDerivedStateFromProps(nextProps,prevState){
    console.log('getDerivedStateFromProps');
    if(nextProps !== prevState){
        return{
            color:nextProps.color
        };
    }
    // ๊ธฐ๋ณธ state๋ฅผ ๋ณ€๊ฒฝํ•  ํ•„์š”๊ฐ€ ์—†์„ ๋•Œ null ๋ฐ˜ํ™˜
    return null;
}
// ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๊ณ  ์ฒซ ๋ Œ๋”๋ง์„ ๋‹ค ๋งˆ์นœ ํ›„ ์‹คํ–‰
// js๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ or ํ”„๋ ˆ์ž„์›Œํฌ์˜ ํ•จ์ˆ˜ ํ˜ธ์ถœ or ์ด๋ฒคํŠธ ๋“ฑ๋ก
// setTimeout, setInterval, ๋„คํŠธ์›Œํฌ ์š”์ฒญ ๊ฐ™์€ ๋น„๋™๊ธฐ ์ž‘์—… ์ฒ˜๋ฆฌ
componentDidMount(){
    console.log('componentDidMount');
}

// props or state ๋ฅผ ๋ณ€๊ฒฝํ–ˆ์„ ๋•Œ ๋ฆฌ๋ Œ๋”๋ง์„ ์‹œ์ž‘ํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฉ”์„œ๋“œ
// ๋ฐ˜ํ™˜ true/false 
// ๋ฉ”์„œ๋“œ ์ƒ์„ฑ ์—†์„์‹œ ๊ธฐ๋ณธ ๋ฐ˜ํ™˜๊ฐ’ true
// false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉด ์—…๋ฐ์ดํŠธ ๊ณผ์ •์€ ์—ฌ๊ธฐ์„œ ์ค‘์ง€
// this.props, this.state๋กœ ์ ‘๊ทผํ•˜๊ณ  ์ƒˆ๋กœ ์ƒ์„ฑ๋  nextProp, nextState๋กœ ์ ‘๊ทผ ๊ฐ€๋Šฅ
// ์—…๋ฐ์ดํŠธ ์„ฑ๋Šฅ์„ ๊ฐœ์„ 
shouldComponentUpdate(nextProps,nextState){
    console.log('shouldComponentUpdate',nextProps,nextState);
    return nextState.number % 10 !==4;
}

// DOM์—์„œ ์ œ๊ฑฐํ•  ๋•Œ ์‹คํ–‰ ComponentDidMount์—์„œ ๋“ฑ๋กํ•œ ์ด๋ฒคํŠธ, ํƒ€์ด๋จธ, ์ง์ ‘ ์ƒ์„ฑํ•œ DOM์ด ์žˆ๋‹ค๋ฉด ์—ฌ๊ธฐ์„œ ์ œ๊ฑฐ ํ•ด์•ผ ํ•จ
componentWillUnmount(){
    console.log('componentWillUnmount');
}

handleClick= () => {
    this.setState({
        number:this.state.number+1
    });
}

// render์—์„œ ๋งŒ๋“ค์–ด์ง„ ๊ฒฐ๊ณผ๋ฌผ์ด ๋ธŒ๋ผ์šฐ์ €์— ์‹ค์ œ๋กœ ๋ฐ˜์˜๋˜๊ธฐ ์ง์ „ ํ˜ธ์ถœ
// ์ด ๋ฉ”์„œ๋“œ์˜ ๋ฐ˜ํ™˜๊ฐ’์€ componentDidUpdate์—์„œ ์„ธ๋ฒˆ์งธ ํŒŒ๋ผ๋ฏธํ„ฐ์ธ snapshot ๊ฐ’์œผ๋กœ ์ „๋‹ฌ๋ฐ›๋Š”๋ฐ 
// ์ฃผ๋กœ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์ง์ „์˜ ๊ฐ’์„ ์ฐธ๊ณ ํ•  ์ผ์ด ์žˆ์„ ๋•Œ ํ™œ์šฉ (์˜ˆ: ์Šคํฌ๋ฃฐ๋ฐ” ์œ„์น˜ ์œ ์ง€)
getSnapshotBeforeUpdate(prevProps,prevState){
    console.log('getSnapshotBeforeUpdate');
    if(prevProps !== this.props.color){
        return this.myRef.style.color;
    }
    return null;
}
// ๋ฆฌ๋ Œ๋”๋ง ์™„๋ฃŒํ•œ ํ›„ ์‹คํ–‰, ์—…๋ฐ์ดํŠธ๊ฐ€ ๋๋‚œ ์งํ›„ -> DOM๊ด€๋ จ ์ฒ˜๋ฆฌ ํ•ด๋„ ๋ฌด๋ฐฉ
// prevProps, prevState๋ฅผ ์‚ฌ์šฉํ•ด ์ด์ „์— ๊ฐ€์กŒ๋˜ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผ
// getSnapshotBeforeUpdate์˜ ๋ฐ˜ํ™˜๊ฐ’์ด ์žˆ๋‹ค๋ฉด snapshot ๊ฐ’ ์ „๋‹ฌ๋ฐ›์„ ์ˆ˜ ์žˆ์Œ 
componentDidUpdate(prevProps,prevState,snapshot){
    console.log('componentDidUpdate',prevProps,prevState);
    if(snapshot){
        console.log('์—…๋ฐ์ดํŠธ๋˜๊ธฐ ์ง์ „ ์ƒ‰์ƒ:', snapshot);
    }
}

// ์—๋Ÿฌ ์ƒ๊ฒผ์„ ๋•Œ ์‹คํ–‰
// componentDidCatch(erro,info){
//     this.setState({
//         error:true
//     });
//     console.log({erro,info});

// }

// ์ปดํฌ๋„ŒํŠธ ๋ชจ์–‘์ƒˆ๋ฅผ ์ •์˜ํ•œ๋‹ค.
// props,state์— ์ ‘๊ทผํ•˜์—ฌ ๋ฆฌ์•กํŠธ ์š”์†Œ๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
// ์•„๋ฌด๊ฒƒ๋„ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์ง€ ์•Š์„ ๋•Œ null or false 
// setState ์‚ฌ์šฉ ๊ธˆ์ง€, ๋ธŒ๋ผ์šฐ์ €DOM ์ ‘๊ทผ ๊ธˆ์ง€ -> componentDidMount์—์„œ ์ฒ˜๋ฆฌํ•œ๋‹ค.
    render(){
        console.log('render');

        const style={
            color:this.props.color
        };

        return(
            <div>
                {this.props.missing.value}
                <h1 style={style} ref={ref => this.myRef=ref}>{this.state.number}</h1>
                <p>color:{this.state.color}</p>
                <button onClick={this.handleClick}>๋”ํ•˜๊ธฐ</button>
            </div>
        )
    }
}

export default LifeCycleSample;
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐ŸŒ WEB > React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

React - useReducer  (0) 2021.05.24
'๐ŸŒ WEB/React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • React - useReducer
์• ์ •์“ฐ
์• ์ •์“ฐ
์• ์ •์“ฐ
์• ์ •์ฝ”๋”ฉ ๐Ÿ’ป
์• ์ •์“ฐ
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (93)
    • ๐Ÿง  MIND (0)
    • ๐Ÿ“ ํšŒ๊ณ  (5)
    • โš™๏ธ ๋ฐฐํฌ ๋ฐ ์ธํ”„๋ผ (2)
    • ๐Ÿ—‚๏ธ DataBase (1)
      • QUERY (1)
    • ๐Ÿ’ป Computer Science (12)
    • ๐ŸŒ WEB (62)
      • HTML,CSS (0)
      • Kotlien (1)
      • JAVA (20)
      • JavaScript (3)
      • Spring (16)
      • Thymeleaf (2)
      • Node.js (1)
      • React (2)
      • SETTING (3)
      • JPA (11)
    • ๐Ÿœ TESTING (3)
    • ๊ธฐํƒ€ (4)
    • ์—๋Ÿฌ๋ชจ์Œ (4)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ArgumentCaptor
  • QueryDSL
  • ๊ธฐ์ดˆ
  • ๋ฐฑ์ค€
  • ๋™์ ํ”„๋ก์‹œ
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜
  • JWT
  • enum
  • ํšŒ๊ณ 
  • ์„œ๋น„์Šคํ…Œ์ŠคํŠธ
  • ๋ฉ”์„œ๋“œํ…Œ์ŠคํŠธ
  • ๊ฐœ๋ฐœ์ž
  • XSSFWorkbook
  • rdsํŒŒ๋ผ๋ฏธํ„ฐ
  • Java
  • ๊ฐœ๋ฐœ์žํšŒ๊ณ 
  • ์ง๋ ฌํ™”
  • Setting
  • null์ œ์™ธ
  • ์ธํ„ฐ๋ทฐ
  • ์ฝ”ํ…Œ
  • spring-boot
  • JPA
  • Gson null
  • 6์›”ํšŒ๊ณ 
  • Spring
  • ํŒŒ์ด์ฌ
  • max_digest_length
  • Til
  • ์ž๋ฐ”

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.v4.2.1
์• ์ •์“ฐ
React LifeCycle
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.