이번에 리액트 Hook 기능중에 useEffect를 배웠습니다.
그런데 제가 헷갈리는 게, useEffect에 함수를 정의할때 해당 함수가 return할 때의 코드가 일반적인 class기반 컴포넌트의 Lifecycle에서 componentWillUnmount와 같다고 설명하는데, 실제로 unmount 되지 않고 state가 변경될 때 마다 호출되고 있습니다.
class 기반 컴포넌트에서는 compoenetWillUnmount가 정말 컴포넌트가 렌더링 화면에서 사라질 때 호출되었는데 function 기반 컴포넌트에서 useEffect return이 호출되는 정확한 타이밍이 언제일까요?
제가 하도 이해가 안되서 같은 기능의 컴포넌트를 class방식과 function 방식으로 만들어봤습니다.
먼저 function 기반의 컴포넌트 입니다.
const App = () => {
const [number, setNumber] = useState(0);
useEffect(() => {
console.log('component did mount with useEffect!');
return () => {
console.log("component will unmount");
};
}, [number]);
return (
<div>
<h2>number is {number}</h2>
<button
onClick={() => {
setNumber(number + 1);
}}
>
Increment
</button>
</div>
);
};
이렇게 하면 버튼을 클릭 할 때마다 number state가 1씩 올라가고
콘솔창에는
component will unmount
component did mount with useEffect!
이렇게 표시가 됩니다. 즉 언마운트 되고 나서 갱신되는 것이 표현됩니다.
그리고 아래는 class 기반으로 만든 컴포넌트 입니다.
class App extends React.Component {
constructor(props) {
super(props);
this.state = { number: 0 };
}
componentDidMount() {
console.log('component did mount');
}
componentDidUpdate() {
console.log('component did update');
}
componentWillUnmount() {
console.log('component will unmount');
}
render() {
const { number } = this.state;
return (
<div>
<h2>number is {number}</h2>
<button
onClick={() => {
this.setState({ number: number + 1 });
}}
>
Increment
</button>
</div>
);
}
}
제 생각에는 같은 기능을 하는 컴포넌트 입니다. 그런데 이 때는 클릭 할 때 마다
component did update
만 표시됩니다. 물론 componentDidUpdate를 없애면 콘솔에는 아무것도 출력되지 않습니다…
긴 글 읽어주셔서 감사합니다… 결론적으로 궁금한 건 useEffect에서 return이 호출되는 타이밍이 정말 컴포넌트가 언마운트 될 때가 맞는지… 그게 궁금하네요… 두 기능의 차이점을 정확히 알고싶어요 ㅠㅠ