useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. class형 컴포넌트의 componentDidMount, componentDidUpdate를 합친 형태로 보아도 무방하다.
import { useEffect, useState } from 'react';
import React from 'react'
const Info = () => {
const [name, setName] = useState('')
const [nickName, setNickName] = useState('')
useEffect(() => {
console.log('렌더링 완료!');
console.log({
name,
nickName
})
}, [])
const onChangeName = e => {
setName(e.target.value);
}
const onChangeNickname = e => {
setNickName(e.target.value);
}
return (
<div>
<div>
<input value={name} onChange={onChangeName}></input>
<input value={nickName} onChange={onChangeNickname}></input>
</div>
<div>
<div>
<b>이름:</b> {name}
</div>
<div>
<b>닉네임:</b> {nickName}
</div>
</div>
</div>
)
}
export default Info
useEffect에서 설정한 함수를 컴포넌트 화면에 맨 처음 렌더링 될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 두 번째 파라미터로 비어 있는 배열을 넣어주면 된다.
특정 값이 변경될 때만 호출하고 싶은 경우 클라스형 컴포넌트에서는
componentDidUpdate(prevProps, prevState){
if(prevProps.value !== this.props.value) {
doSomething();
}
}
props안에 들어있는 value 값이 바뀔 때만 특정 작업을 수행한다.
useEffect에서는 두 번째 파라미터로 전달되는 배열안에 검사하고 싶은 값을 넣어주면 된다.
useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 배열에 무엇을 넣을지에 따라 실행되는 조건이 다르다.
컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷 정리 함수를 반환해 주어야 한다.
useEffect를 다음과 같이 수정하고.
App.js에 간단하게 상태관리를 해보겠다.
보이기/숨기기 버튼을 통해 컴포넌트가 나타날 때 콘솔에 effect가 나타나고, 사라질때 cleanUp이 나타난다.