import React, {useEffect, useState} from 'react'
export default function Info() {
const [name, setName] = useState('');
const [nickname, setNickname] = useState('');
useEffect(() => {
console.log('effect');
console.log(name);
return () => {
console.log('cleanup');
console.log(name);
}
}, [name]);
useEffect(() => {
console.log('mount effect');
return () => {
console.log('unmount cleanup')
}
}, []);
function onChangeName(e) {
setName(e.target.value);
}
function onChangeNickname(e) {
setNickname(e.target.value);
}
return (
<>
<div>
<input value={name} onChange={onChangeName} />
<input value={nickname} onChange={onChangeNickname} />
</div>
<div>
<div>
<b>이름: </b>{name}
</div>
<div>
<b>닉네임: </b>{nickname}
</div>
</div>
</>
)
}
import React, { useState } from "react";
import Info from "./Info";
function App() {
const [visible, setVisible] = useState(false);
return (
<>
<button onClick={() => {
setVisible(!visible);
}}>
{visible ? '숨기기' : '보이기'}
</button>
<hr />
{visible && <Info />}
</>
)
}
export default App;
- mount 시 'mount effect' 호출 및 name 변수가 생성되므로 'effect'도 호출
- name 값 변경 시 'cleanup'을 출력 & 직전 name 값 출력
- unmount 시 'unmount cleanup' 호출 및 name 변수 사라지므로 'cleanup'도 호출
개발자 도구에서 mount -> unmount -> mount 되는 현상