[React] useEffect에 대해 알아보자

 

🎠 useEffect의 개념을 정리하고 예시를 통해 사용법을 알아본다.

---

1. useEffect의 정의

컴포넌트가 렌더링 될 때마다 side effect를 실행시키는 React Hook이다.

🔔side effect
컴포넌트가 렌더링 된 이후에 비동기로 처리되어야 하는 효과들

useEffect(() => {
	//useEffect가 동작하고 실행할 로직
    ...
}, [/*의존성 배열*/]);

 

2. useEffect 작동 조건

• 페이지가 처음 렌더링되고 난 후 무조건 한 번 실행된다.
• useEffect 배열로 지정된 useState 값이 변경될 때마다 실행된다.

3. useEffect 사용법

• 컴포넌트가 처음 나타났을 때만 실행

useEffect(() => {
  console.log('hi!');
}, []);

만약 배열을 생략한다면 리렌더링 될 때마다 실행된다.

• 컴포넌트가 업데이트 됐을 때(특정 값이 바뀌었을 때)

import React, {  useState, useEffect } from 'react';

function App() {
  const [myState, setMyState] = useState(false);

  useEffect(() => {
    console.log('myState값 업데이트');
  }, [myState]);


  return (
    <>
      <button onClick={() => setMyState(preState => !preSate)}>click</button>
    <>
  );
}

export default App;

• 컴포넌트가 언마운트 되게 이전에 혹은 업데이트 직전에 어떤 작업을 수행하고 싶다면 clean-up 함수를 반환
  • 특정 값을 업데이트 하기 직전에 작업을 수행하고 싶으면 배열에 특정 값을 넣어야 하고, 원마운트 이전에 작업을 수행하고 싶으면 빈 배열을 작성해야 한다.

import React, { useState, useEffect } from 'react';

function App() {
  const [myState, setMyState] = useState(false);
  
  useEffect(() => {
    console.log('myState값 업데이트');
    
    return() => {
      console.log('myState는', myState);
    }
  }, [myState])
  
  return (
    <>
      <button onClick={() => setMyState(preState => !preState)>click</button>
    <>
 );
}

---

🌸 useEffect 때문에 무한렌더링 지옥에 자주 빠졌다. 사용법을 익히고 정말 잘 사용해야 하는 훅이다.