카운터를 만들어 추가해 보겠습니다.
import {useState} from 'react'
function Counter (){
const [count, setCount] = useState(0)
const handleCountUp = (e) => {
setCount(count + 1)
}
return (
<>
<div>{count}</div>
<button onClick={handleCountUp}>Up!</button>
</>
)
}
function App() {
return (
<div className="App">
<Counter/>
</div>
);
}
export default App;
count가 컴포넌트의 state로 존재하는데 이 state가 변할 때마다 뭔가 다른 효과(Side Effect)를 주고 싶습니다. 아래와 같이 수정하여 count가 홀수인지 짝수인지 비교해서 alert을 띄워주도록 합시다.
import React, { useState, useEffect } from 'react';//useEffect추가
function Counter() {
const [count, setCount] = useState(0)
const countUp =()=>{
setCount(count+1)
}
//count가 변했을때 동작할 행동을 useEffect를 이용해 구현
useEffect(() => {
if(count%2){
alert("홀수입니다")
}else{
alert("짝수입니다")
}
}, [count])
return(
<>
<div>{count}</div>
<button onClick={countUp}>up!</button>
</>
)
}
function App() {
return (
<div>
<Counter/>
</div>
);
}
export default App;
위 예제에서는 useEffect를 사용하기 위해 useState와 마찬가지로 useEffect를 import합니다. 이 useEffect는 state를 지정하여 해당 스테이트가 변경되었음을 감지하면 함수를 실행시켜줍니다.
자, 여기서 한 번 페이지를 새로고침 해봅시다. 그러면 클릭하지 않았는데도 "짝수입니다!"라는 메시지가 나옵니다. 그 이유는 useEffect 훅이 컴포넌트 마운트 단계에서 실행되기 때문입니다.
useEffect를 조금 더 살펴봅시다. 기본적인 구조는 아래와같습니다.
useEffect(()=>{
// 1. state가 변경되어 렌더링 될 때 실행하는 부분!
return()=>{
// 2. cleanup 함수의 내용입니다.
// 컴포넌트가 업데이트 되거나, 언마운트 될때 실행됩니다.
// 업데이트 될때는 위의 1번 보다 먼저 실행됩니다.
// 여러분들 시험 공부 하나를 마치고 다음 시험 공부 전에 책상 정리하는 느낌이랄까요..
}
},[]) // 의존 배열입니다. (빈배열이라면 마운트될때 1번만 실행됩니다.)
useEffect의 형태
// 컴포넌트가 업데이트 될 때마다 매번 실행
useEffect(()=>{
console.log('hello world');
})
// 마운트 단계에서만 1번 실행
useEffect(()=>{
console.log('hello world');
}, [])
// 의존 배열의 원소들에 변화가 일어날 때마다 실행
useEffect(()=>{
console.log('hello world');
}, [변수1, 변수2...])
<aside> 💡 퀴즈를 푸실 때 최초로 렌더링 될 때, 상태가 업데이트 됐을 때, 업데이트가 된 내용을 렌더링 할 때 log를 찍도록 해보세요! 잘 안되고 있다면 무한 반복이 일어나고 있을 수도 있습니다.
</aside>
useEffect) ①