🪁react/react 실습
useEffect : 특정 변수 값이 바뀔 때 함수실행[자신감up 실습2]
하얀성
2024. 1. 27. 16:05
랜더링 내용.
코드
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