useEffect - React Hooks 리액트훅

useEffect는 React Hooks중에있는 렌더링에 관한 훅이다. 

컴포넌트를 useEffect를 이용하여 처음렌더링될때 , 업데이트될때 , 제거되었을때의 코드를 집어넣을 수 있다.

코드로 알아보자. 

App.js에 useEffect함수안에 console을 찍어보았다.

useEffect함수는 렌더링될때마다 항상실행이된다.

버튼을 누르면 <Test>컴포넌트가 렌더링됬다가 안됬다가 하는 코드를 작성해보았다. useState가 바뀌면서 화면이 재렌더링이 될대마다 useEffect도 같이 함수가 실행된다. 

이렇게 화면이 렌더링될때 useEffect가 따라다닌다. 

여기서 useEffect를 설정해 줄 수 있는데 , 

맨 끝에 빈배열을 넣어주면 맨처음 한번실행되고 그다음 렌더링부터는 실행이 안된다. 

뒤에 배열안에는 어떤 요소가 렌더링될때 실행할건지 설정해줄 수 있다. 

이렇게 변수를 넣어주어서 a값이 바뀌면서 재렌더링이되면 useEffect도 실행이된다. 하지만 a의 값이 재랜더링이 될때만 가능하다. 

 

이번엔 Test라는 component안에 useEffect를 사용하여 렌더링되면 'Test컴포넌트등장'이라는 콘솔을찍고 return안에함수는 컴포넌트가 사라질때 실행되는 함수이므로 'Test컴포넌트 사라짐'이라고 콘솔에 찍어보았다. 

 

import './App.css';
import { useEffect, useState } from 'react';

function App() {
  let [a , setA] = useState(false);
  return (
    <div className="App">
      { a ? <Test></Test> : null }
      <button onClick={()=>{setA(!a)}}>누르면a바뀌면서 재렌더링됨</button>
    </div>
  );
}

function Test(){
  useEffect(()=>{
    console.log('Test컴포넌트 등장')
    return(()=>{
      console.log('Test컴포넌트 사라짐')
    })
  })
  
  return(
    <div>테스트입니다.</div>
  )
}

export default App;

useEffect는 타이머를 만들때 필수적으로 사용하게 될거다. 잘생각해보았으면 좋겠다. 

왜냐면 타이머를 만들때 타이머의 시간은 useState를 사용해 바뀔때 마다 화면에서 렌더링이된다. 그럴때마다 timer도 같이 초기화되며 렌더링이되면 안되기때문에 useEffect []를 사용하여 맨처음에만 렌더링되며 타이머의 숫자가바뀌어도 렌더링되지않게 막아놓으면 타이머는 적상적으로 작동하게된다.