useEffect

Noa·2022년 12월 2일

목록 보기

13/22

useEffect

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook.
쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면?
또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면?
useEffect를 사용한다

핵심 기능 => Component가 rendering될 때 실행이 된다.

우리가 앞서 배웠다시피, useEffect는 useEffect가 속한 컴포넌트가 화면에 렌더링 될 때 실행되고, 이런 useEffect의 특징에 의해 우리가 의도치않은 동작을 경험할수도 있다.

=> input에 값을 입력했을 때 useEffect가 계속 실행이 되는 것을 확인 할 수 있다.
=> state가 변경이 되면 rerendering이 일어나게 되는데 rerendering이 일어 났기 때문에 Component가 rendering될 때 실행되는 useEffect가 계속해서 실행되는 것이다.

의존성 배열

=> useEffect를 제어할 수 있는 방법 => 의존성 배열 => 의존성 배열안에 값을 넣고, 그 값이 바뀔 때만 useEffect를 실행하도록 하는 방법

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

의존성 배열이 빈배열인 경우

의존성 배열 자리에 빈 배열을 넣은 것은 처음에 한번만 실행이 되도록 하기 위해서
=> 이렇게 useEffect를 사용하는데, 어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 된다다.
의존성 배열안에 값이 있는 경우

의존성 배열 자리에 넣어놓은 값이 변할 때마다 계속 해서 실행된다. 예를 들어 두 가지 버튼이 존재하고 각각 숫자를 업데이트, 날짜를 업데이트 할 수 있는 버튼일 때, 만약 의존성배열에 숫자의 상태만 넣어 놓게 된다면, 날짜를 업데이트 하는 버튼을 눌렀을때에는 useEffect가 실행이 되지 않을 것이다.

Clean up

“어떤 컴포넌트가 화면에서 보여졌을 때, 사라졌을 때 무언가를 실행하고 싶다면” useEffect를 사용한다.
컴포넌트가 나타났을 때 (렌더링됐을 때 === 함수 컴포넌트가 실행됐을 때) useEffect의 effect 함수가 실행되는 것은 배웠고, (ComponentDidMount, componentDidUpdate)
이제 컴포넌트가 사라졌을 때 무언가를 어떻게 실행하는지 (componentWillUnmount) 이 과정을 우리는 클린 업 (clean up) 이라고 표현한다.

clean up 이란 component가 화면에서 사라졌을 때, 무언가를 실행하고 싶을때 사용 useEffect 함수 안에 return을 넣어주고 return 으로 우리가 실행하고 싶은 함수를 넣어주면 된다. => 화면에서 component가 사라졌을때 실행하고자 하는 함수가 실행이 된다.

속세를 벗어나는 버튼을 만들었고 버튼을 누르면 /todos라는 링크로 이동을 하게 된다.
=> 다른 링크로 이동을 하게 되면 이동하기전 component는 없어지게 되고(Q), 그러면 useEffect를 통해 console.log를 찍게 하는 코드
=> 언제 클린업이 실행되겠구나 하는 것을 파악하자
=> 클린업을 언제, 왜, 어떻게 활용할 수 있을지는