๐Ÿฑ #8 React.js - Life cycle

oask12ยท2022๋…„ 11์›” 9์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
9/13
post-thumbnail

๐ŸงถLife Cycle

๋ฆฌ์•กํŠธ๋Š” 3๊ฐœ์˜ Life Cycle์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”๋ฐ ๊ทธ 3๊ฐ€์ง€๋Š” Mounting, Updating, Unmounting ์žˆ๋‹ค.

Mounting์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‹œ์ž‘๋  ๋•Œ
Updating์€ state๊ฐ€ ์—…๋ฐ์ดํŠธ ๋˜๊ณ  UI๊ฐ€ ์—†๋ฐ์ดํŠธ ๋  ๋•Œ
Unmounting์€ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ข…๋ฃŒ๋  ๋•Œ

1. Constructor(Class Component)

Class Component์—์„œ ์ฒ˜์Œ์œผ๋กœ constructor์—์„œ state๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ๊ทธ ์ด์œ ๋Š” Life Cycle์—์„œ ์ฒซ ๋ฒˆ์งธ๋กœ ์‹คํ–‰๋˜๋Š” Life Cycle ํ•จ์ˆ˜์ด๋‹ค. ๊ทธ๋ž˜์„œ ์•ฑ์„ ์‹œ์ž‘ํ•˜์ž๋งˆ์ž ์‹คํ–‰ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด constructor์•ˆ์— ๋„ฃ์œผ๋ฉด ๋œ๋‹ค.

import React, { Component } from 'react'
import './App.css';
import BoxClass from './component/BoxClass';

export default class Appclass extends Component {

    constructor(props){ // constructor ๋ฆฌ์•กํŠธ์—์„œ ์ œ๊ณตํ•˜๋Š” lifecycle ํ•จ์ˆ˜ ์ค‘ ํ•˜๋‚˜ (์ƒ์„ฑ์ž) : ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‹คํ–‰๋˜์ž ๋งˆ์ž ํ•จ์ˆ˜์‹คํ–‰
        super(props)
        this.state={ // state๋ฅผ ์„ ์–ธํ•œ๋‹ค.
            counter2 : 0, //์›ํ•˜๋Š” state๋ฅผ ์„ ์–ธํ•ด ์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.
            num:1,
            value:0
        };
    }
}

2. getDerivedStateFromProps

getDerivedStateFromProps๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ ์„ค๋ช…ํ•˜๋ฉด state์™€ props๋ฅผ ๋™๊ธฐํ™”์‹œ์ผœ์ฃผ๋Š” ํ•จ์ˆ˜์ด๋‹ค.
props๋กœ ๋ฐ›์•„ ์˜จ ๊ฐ’์„ state์— ๋™๊ธฐํ™”์‹œํ‚ค๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉํ•˜๋ฉฐ, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ๋  ๋•Œ์™€ ์—…๋ฐ์ดํŠธ ๋  ๋•Œ ํ˜ธ์ถœ๋œ๋‹ค.

function ScrollView({row}) {
  const [isScrollingDown, setIsScrollingDown] = useState(false);
  const [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // ๋งˆ์ง€๋ง‰ ๋ Œ๋”๋ง ์ดํ›„ ํ–‰์ด ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. isScrollingDown์„ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `Scrolling down: ${isScrollingDown}`;
}

3. render

render๋Š” UI๋ฅผ ๊ทธ๋ ค์ฃผ๋Š” ํ•จ์ˆ˜์ด๋‹ค.
์ด๋Š” ๊ฐ€์žฅ ๊ธฐ์ดˆ์ ์ธ ๋ฉ”์„œ๋“œ์ด๊ธฐ๋„ํ•˜๊ณ  ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๋ฉ”์„œ๋“œ์ด๊ธฐ๋„ ํ•˜๋‹ค. ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•  ๋•Œ ํ•„์š”ํ•œ ๋ฉ”์„œ๋“œ๋กœ ์œ ์ผํ•œ ํ•„์ˆ˜ ๋ฉ”์„œ๋“œ์ด๊ธฐ๋„ ํ•˜๋‹ค. ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” render๋ฅผ ์•ˆ์“ฐ๊ณ  ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋‹ค.

render() {
    console.log("render");
    return (
      <div>
        <div>state: {this.state.counter2}</div> {/* class ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ€๋ฅผ๋•Œ๋Š” counter2๋งŒ ์„ ์–ธํ•˜๋Š” ๊ฒƒ์ด์•„๋‹ˆ๋ผ. this.state ๋ฅผ ๋งค๋ฒˆ ๋ถ™์—ฌ์ค˜์•ผ ํ•œ๋‹ค.*/}
        <button onClick={this.increase}>ํด๋ฆญ!</button>
        <BoxClass num={this.state.value}/>
      </div>
    )
  }

4.componentDidMount

UI๊ฐ€ ์…‹ํŒ…์ด ์™„๋ฒฝํ•˜๊ฒŒ ๋์„ ๋•Œ ์•Œ๋ ค์ค€๋‹ค.
์ฃผ๋กœ API ํ˜ธ์ถœ ์ž‘์—…๋“ค์„ ํ•œ๋‹ค. ์‚ฌ์šฉ์ž๊ฐ€ ์•ฑ์„ ์‹คํ–‰ํ–ˆ์„ ๋•Œ UI๊ฐ€ ๋จผ์ € ๊ทธ๋ ค์ง„ ์ƒํƒœ๋กœ API๊ฐ€ ํ˜ธ์ถœ ๋˜์–ด์•ผ ํ•œ๋‹ค. UI๊ฐ€ ๊ทธ๋ ค์ง€์ง€ ์•Š์€ ์ƒํƒœ๋กœ API๋ฅผ ํ˜ธ์ถœ ํ–ˆ์„ ๋•Œ ํ‘œ์‹œ๊ฐ€ ์•ˆ๋œ๋‹ค. ๊ทธ๋ž˜์„œ render ๋‹ค์Œ ๋‹จ๊ณ„์ธ componentDidMount์— API๋ฅผ ํ˜ธ์ถœ ํ•ด์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.

5. shouldComponentUpdate

๊ฐ„๋‹จํ•˜๊ฒŒ ๋งํ•˜๋ฉด component๊ฐ€ render๋ฅผ ํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค.

6. componentDidUpdate

Updating ์ƒํ™ฉ์ผ ๋•Œ ์ž‘๋™๋œ๋‹ค. state๊ฐ€ ์—…๋ฐ์ดํŠธ ๋˜๊ฑฐ๋‚˜ setState๊ฐ€ ๋ฐœ์ƒ ๋  ๋•Œ rnder๊ฐ€ ๋ฐœ์ƒ์ด ๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  render๊ฐ€ ๋ฐœ์ƒ๋˜๋ฉด componentDidUpdate๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค. ์™œ ํ˜ธ์ถœ์„ ํ•ด์ฃผ๋ƒ๋ฉด ์šฐ๋ฆฌ๊ฐ€ setState๋ฅผ ํ•ด๋„ ๋น„๋™๊ธฐ์‹์œผ๋กœ ๊ธฐ๋‹ค๋ ธ๋‹ค๊ฐ€ ๋‚˜์ค‘์— ํ˜ธ์ถœ๋œ๋‹ค. ๊ทธ๋ž˜์„œ state๊ฐ€ update๊ฐ€ ๋˜์—ˆ๋Š”์ง€ ์•Œ๋ ค์ฃผ๋Š” ๊ฒƒ์ด๋‹ค.

7. componentWillUnmount

์ด ๋ฉ”์„œ๋“œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ DOM์—์„œ ์ œ๊ฑฐํ•  ๋•Œ ์‹คํ–‰ํ•œ๋‹ค. componentDidMount์—์„œ ๋“ฑ๋กํ•œ ์ด๋ฒคํŠธ๊ฐ€ ์žˆ๋‹ค๋ฉด ์—ฌ๊ธฐ์„œ ์ œ๊ฑฐ ์ž‘์—…์„ ํ•ด์•ผํ•œ๋‹ค. ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” useEffect CleanUp ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ํ•ด๋‹น ๋ฉ”์„œ๋“œ๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ ์œ„์— ์žˆ๋Š” ๊ฒƒ๋“ค์€ Class Component๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ ‡๋‹ค๋ฉด Function Component์—๋Š” ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ์•Œ์•„๋ณด์ž. ๊ทธ๊ฒƒ์€ ๋ฐ”๋กœ useEfffect()์ด๋‹ค.

8. useEffect

useEffect๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps์˜ ์—ญํ• ์„ ๋ชจ๋‘ ํ•œ๋‹ค.
๋•Œ๋ฌธ์— ์œ„ ์ฝ”๋“œ๋Š” 1) ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งˆ์šดํŠธ ๋œ ํ›„, 2) ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—…๋ฐ์ดํŠธ๋˜๊ณ  ๋‚œ ํ›„ 3) ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์–ธ๋งˆ์šดํŠธ ๋˜๊ธฐ ์ „ ๋ชจ๋‘ ์‹คํ–‰๋œ๋‹ค.

  useEffect(()=>{
    console.log("useEffect2 Firee", counter);
  },[counter]) //์–ด๋ ˆ์ด์˜ ๊ฐ’์„ ๋„ฃ์œผ๋ฉด ์ปดํ“จํ„ฐ๊ฐ€ ์ฃผ์‹œํ•œ๋‹ค. ์ฆ‰ ๊ฐ’์ด ๋ฐ”๋€Œ๋ฉด `componentDidUpdate`๊ฐ€ ๋œ๋‹ค.
//์–ด๋ ˆ์ด์˜ ๋‚ด์šฉ์ด ํ•˜๋‚˜๋ผ๋„ ๋ฐ”๋€Œ๋ฉด render๊ฐ€ ๋œ๋‹ค.
profile
์•ˆ๋…•ํ•˜์„ธ์š” ํ”„๋ก ํŠธ์—”๋“œ ์ค€๋น„์ƒ์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€