useEffect

component를 호출하면 component안에 있는 code들이 실행이된다.

그리고 그 안의 state가 변화하면 자연스럽게 그 code들이 다시 실행이 된다.

하지만 우리가 component안에 API를 이용해서 데이터를 받아온다던지 하는 경우에

state가 변화할 때 마다 계속 code가 실행이 되어 데이터를 불러올 필요는 없을 것이다.

다시말해서 component의 내부의 몇몇 코드들은 처음 딱 한번만 실행되고 다시는 실행되지 않도록 하고 싶을 것이다.

 

이럴 때 useEffect를 사용하는데 첫번째 argument는 우리가 딱 한번만 실행하고 싶은 코드가 들어온다.
두번째 argument는 마법같은친구이다. 두번째 인자는 일단 나중에 살펴보자

 

처음 component가 render될 때 저 두 console이 찍힐 것이고

그 다음 state가 변화하면서 리렌더링 될때에는 첫 번째 콘솔만 찍힐 것이다.

이제 두 번째 인자에 대해서 알아보려고 한다.

state를 두개 만들었고 하나는 search bar이다.

useEffect를 사용해서 몇가지 상황을 만들어보려고한다.

처음에만 실행되고 그 다음에 어떤 state가 변화되든 실행이 안되는 i run only once [ ] ( 배열 존재 )

처음에도 실행되고 그 다음 배열에 있는 state가 변화되면 함수가 실행되는 i run when somthing change [ something ] ( 배열안에 state존재 )

처음에도 실행되고 그 다음 어떠한 state가 변화되도 실행되는 배열조차 없는 것 ( 두번째 인자를 주지 않은 경우 )

여기서는 첫 번째와 두 번째상황을 만들어 보았다.

input에는 타이핑 할 때마다 setKeyword를 사용하여 state를 변화시켰고, button에는 클릭할 때마다 setCounter를 사용하여 state를 변화시켰다. 처음 렌더링하면 위의 useEffect가 전부 실행이 될 것이다.

그 다음 버튼을 눌러 count state를 변화 시키면 아래와 같은 콘솔이 찍힌다.

마지막으로 input에 타이핑을하여 keyword state를 변화 시키면 아래와 같은 콘솔이 찍힌다.

이렇게 우리가 모든 코드를 실행시키지 않도록 컨트롤 할 수 있는 useEffect에 대해서 배워보았다.

 

cleanup이라는 걸 알아보자!!

이건 우리가 useEffect를 사용해서 처음 렌더링 될때만 실행하거나 아니면 업데이트 될 때마다 실행해줄 함수를 적어주었는데

이 함수의  return값으로 함수를 주면 useEffect를 사용하고 있는 Component가 사라질 때 실행이 된다.

Hi라는 컴포넌트를 만들고 생성되었을 때 hi there이라고 출력하고 사라질 때 bye ~!라고 출력하도록 해보았다.

App에서 true와 false를 스위칭하는 showing, setShowing을 만들고 버튼을 누를 때 showing의 값에 의해서 Hide, Show를 보여주는 것과 showing에 따라서 Hi컴포넌트가 생성이 되고 아니면 null이 될 지 바뀌는 기능을 만들어 보았다.

 

 

처음에는 이렇게 출력이 되고 Hide버튼을 누르면 Hi가 사라지고 null이 대체 되어야 할 것이다.

그리고 div#root안 h1태그안에 분명히 존재하는 것을 알 수 있다. Hide버튼을 누르면

Hi가 사라지면서 콘솔에는 bye ~!가 출력이 되었다. 이게 우리가 useEffect에서 return값으로 주었던 것이다.

이것을 통해서 component가 사라질 때 return 에 있는 함수를 출력하는 것을 확인할 수가 있다.

또한 잠깐 숨기거나 한 것이 아니라 정말 html상에서 사라진 것을 확인할 수가 있다.