React - useEffect 를 사용하여 마운트 언마운트 업데이트 시 할 작업 설정하기

useEffect

useEffect라는 Hook함수에 대해서 알아보자

useEffect이 함수를 사용하게 되면 우리가 만든 리액트가 화면에서 사라질때나 와 나타나게 될 때 특정 작업을 할 수 있다. 추가적으로 컴포넌트의 어떤 props나 상태가 바뀌어서 업데이트가 될 때에도 작업할 수 있고, 업데이트가 되기 전에도 할 수 있다.

컨솔창을 띄워서 업데이트가 이뤄질 때마다 어떤 알림이 뜨는지 보면 이해할 수 있다.

💡마운트와 언마운트
1. 마운트
컴포넌트를 나타는 것을 의미한다
2. 언마운트
컴포넌트가 삭제될 때 언마운트라고 한다.
3. 만약에 useEffect에 등록한 함수에서 props로 받아온 값을 참조하거나 혹은 우리가 useState로 관리하고 있는 값을 참조하고 있는 경우 deps배열에 넣어줘야 한다.
안해준다고 해서 오류가 나지는 않지만 나중에는 경고가 나타날 수도 있다.

useEffect의 내부에서 사용하고 있는 함수가 사용하는 값이 있다면 dependency에서 꼭 넣어줘야만 그 값이 최신의 값을 가르키고 있게 한다.