useEffect : 특정 변수 값이 바뀔 때 함수실행[자신감up 실습2]

랜더링 내용.

---

---

---

 

코드

import './App.css'

import React, { useEffect, useState } from 'react'

function App() {

  const [point, setPoint] =useState(0);

  const [grade, setGrade] = useState("신입사원");

  const [salary, setSalary] = useState(5000);

  const [color, setColor] = useState("gray");

  const btnWork = () => {

    setPoint(point + 200);

    console.log("일 잘하는 중?, 진급 함?")

    console.log("point",point)

    if (point === 1000){

      setGrade("과장")

      setSalary(8000);

    }

    if (point === 2000){

      setGrade("부장")

      setSalary(12000);

    }

  }

  useEffect(() => {

    console.log("직급이 변경되었습니다. ㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊㅊ")

    if (grade === '과장'){

      setColor("green")

    }

    if (grade === "부장"){

      setColor("gold")

    }

  },[grade])

  return (

    <div className='App' style={{backgroundColor : `${color}`}}>

      <button onClick={btnWork}>일 열심히 함.</button>

      <h1>당신의 직급은 {grade} 입니다. <br/>

      연봉은 {salary}만원 입니다.</h1>

    </div>

  )

}

export default App

 

 

---

출처 : 코딩 메모왕 TV