React Hook(useEffect)

지난 시간에 react hook의 useState를 써보았고

이번시간에는 useEffect를 써볼거에요.

 

useState에 대해 궁금하시다면 아래 링크를 클릭해주세요!

cnwnsdms.tistory.com/entry/React-HookuseState

React Hook(useState)

 

useEffect

useState와 마찬가지로 먼저 import를 통해 useEffect기능을 가져옵니다.

 

import React, {useEffect} from 'react';

 

 

function의 render가 끝나고 useEffect의 첫번째 인자로 온 함수가 호출되도록 약속되있습니다.

useEffect는 처음으로 렌더가 실행될때 실행되고, 렌더가 실행될때마다 실행됩니다.

이것들은 Class Component의 componentDidMount & componentDidUpdate 와 같습니다

 

그래서 useEffect첫번째 인자로 ‘함수’가 와야됩니다.

두번째 인자로는 ‘배열’이 나오고 이 배열안에있는 원소의 상태가 바뀌었을때만 첫번째 인자인 함수가 호출되도록 약속되어있습니다.

그리고 배열안의 여러개 설치도 가능하죠.

 

=>Class Component의 componentDidMount의 기능으로만 사용하려면 2번째 인자로 빈 배열 []을 주면 됩니다. -> 처음 마운트할때만 사용되고 그뒤로는 사용안됩니다.

 

Clean up

useEffect가 처음으로 렌더될때 실행되고, 렌더가 다시한번 실행되기전에 이전에 실행되었던 렌더를 정리할때 씁니다.(useEffect안의 return function();이 호출되도록 약속되어있음)

-> 순서 : render -> useEffect 안의 return function -> useEffect안의 나머지부분(componentDidUpdate느낌)

-> Mount완료후 그다음 update될때 실행됩니다.

 

Ex)

useEffect(function(){

    document.title = number

return function(){

        console.log(cleanUp);

    }

  },[number]);

 

-> 재실행시 render후 return function()이 먼저 실행된 후 나머지 useEffect안의 내용이 실행됩니다

 

react hook 예시

react hook 예시

이것은 생활코딩 강의에 나온 예시입니다.

 

해당 코드로 실행을 해보면

 

이런 페이지가 만들어지고 

개발자 도구에서는

이 순서로 console 이 찍힙니다.

 

function과 class의 random을 각각 클릭해보면 이 순서로 console이 찍히는 것을 알 수 있습니다.

 

 

 

 

- 이 노트는 생활코딩의 유튜브 강의를 통해 배운 내용을 정리한 것입니다.

- 초보 개발자라 부족한 점이 아직 많습니다. 다른 의견이 있으시다면 자유롭게 남겨주세요.

- 처음 접하시는 분께는 다소 어려울 수 있지만 어느 정도 개념이 잡히신 분께 도움이 되었으면 하는 바람에서 작성된 글입니다.