React 에서 useEffect의 return 호출 조건이 이해가 안됩니다!

Question

이번에 리액트 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 (

number is {number}

); }; 이렇게 하면 버튼을 클릭 할 때마다 number state가 1씩 올라가고콘솔창에는 component will unmountcomponent 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 (

number is {number}

); } } 제 생각에는 같은 기능을 하는 컴포넌트 입니다. 그런데 이 때는 클릭 할 때 마다 component did update만 표시됩니다. 물론 componentDidUpdate를 없애면 콘솔에는 아무것도 출력되지 않습니다.. 긴 글 읽어주셔서 감사합니다.. 결론적으로 궁금한 건 useEffect에서 return이 호출되는 타이밍이 정말 컴포넌트가 언마운트 될 때가 맞는지.. 그게 궁금하네요.. 두 기능의 차이점을 정확히 알고싶어요 ㅠㅠ

카시와기유키 · Answer

useEffect return 은 업데이트 직전에도 호출되는 걸로 알고 있습니다.

세브라이드 · Answer

useEffect의 리턴은 다음 useEffect를 실행하기 직전, 혹은 언마운트 시에 실행됩니다.용도는 useEffect에서 발생한 사이드 이펙트를 정리하는 용도입니다. 예를 들어 이펙트가 일어나는 동안만 클릭 이벤트를 입력받고 싶다면 useEffect 안에서는 addEventListner('click', ~) 해주고 리턴함수에는 removeEventListner('click')을 해주는 겁니다. 이래야 useEffect 실행될때마다 리스너가 무한대로 붙는 참사를 막을 수 있으니까요.

세브라이드 · Answer

그리고 클래스 컴포넌트의 라이프사이클과 useEffect는 전혀 다른 개념입니다. 라이프사이클은 상태머신 기반으로 생각해야되고 useEffect는 사이드이펙트 기반으로 생각해야 합니다. 따라서 useEffect의 어떤 플로우는 클래스 컴포넌트의 어떤 라이프사이클과 1:1 대응이 되나 이런 식으로 생각하는 건 잘못된 이해입니다.

김가든 · Answer

감사합니다 ㅠㅠ 이제 이해가 확실히 됐네요.. 각종 강의에서 useEffect를 쉽게 설명해주려고 LifeCycle이랑 비교해서 설명해 주다보니까 제가 잘못 이해하게 되었나 봅니다 정말 감사합니다!

React 에서 useEffect의 return 호출 조건이 이해가 안됩니다!

4개의 답변

#hook 목록