useEffect()

useEffect()

• side effect를 수행하기 위한 Hook
• 리액트의 side effect는 효과, 영향을 말한다.

예를 들면 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 작업들을 말한다.
이러한 작업이 effect라 불리는 이유는 다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없기 때문이다.
즉 렌더링이 끝난 이후에 실행되어야 하는 작업들이다.

이러한 작업이 side로 실행된다는 의미에서 side effect라 불린다.

 

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

function App() {
  const [count, setCount] = useState(1)
  const [name, setName] = useState('')

  const handleCountUpdate = () => {
    setCount(count + 1)
  }


  // 인자로 이벤트 받아옴
  const handleInputChange = (e) => {
    setName(e.target.value)
  }

  // useEffect는 인자로 콜백함수를 전달받는다.
  // 렌더링 될때마다 매번 실행된다. 
  useEffect(() => {
    console.log('count 렌더링')
  }, [count]) 

  useEffect(() => {
    console.log('name 렌더링')
  }, [name])

  return (
    <div className="App">
      <button onClick={handleCountUpdate}>update</button>
      <span> count: {count}</span>
      <input type="text" value={name} onChange={handleInputChange} />
      <span>name: {name}</span>
    </div>
  );
}

export default App;

 

---

 

useEffect 사용해보기

 

//1. useEffect실행 count값이 변화될 때만 렌더링이 실행된다. 
  useEffect(() => {
    console.log('count 렌더링')
  }, [count]) 

 // 2. useEffect실행 name값이 변화됐을 때 실행된다.
  useEffect(() => {
    console.log('name 렌더링')
  }, [name])

 

• 마운트 + [item] 변경될때만 실행
• 해당 요소의 업데이트 됐을때만 useEffect가 실행된다.

 

useEffect(이펙트 함수, 의존성 배열)

• useEffect() 함수만으로 생명주기함수와 동일한 기능을 수행할 수 있다.
• 의존성 배열은 말 그대로 Effect 의존하고 있는 배열이다.
  배열안에 있는 변수중에 하나라도 값이 변경되면 이펙트 함수가 실행된다.
• 기본적으로 이펙트 함수는 처음 컴포넌트가 렌더링된 이후와 업데이트 된 re-render 이후에 실행된다.

 

//맨 처음 렌더링 될때만 실행
  useEffect(() => {
    console.log('렌더링')
  }, [])

 

useEffect(이펙트 함수, [])

• 의존성 배열에 빈배열을 넣게 된다면 이펙트 함수가 mount, unmount시 단 한번씩만 실행된다.
• 해당 이펙트함수가 state, props 어떤값에도 의존하지 않는것으로 여러번 실행되지 않는다.

// 업데이트 될 때마다 호출
useEffect(이펙트 함수);

 

useEffect(이펙트 함수)

• 의존성 배열을 생력하면 컴포넌트가 업데이트 될 때마다 호출된다.

 

• 함수 컴포넌트안에서 실행되기때문에 해당 컴포넌트의 state, props에도 접근할 수 있다.

 

---

 

useEffect & Clean up - Timer

 

//App.js
import './App.css';
import { useState } from 'react';
import Timer from './Component/Timer';

function App() {

  const [showTimer, setShowTimer] = useState(false)
  return (
    <div>
    	// showTimer가 true일때만 timer실행
      {showTimer && <Timer />}

      <button onClick={() => setShowTimer(!showTimer)}>Toggle Timer</button>
    </div>
  );
}

export default App;

 

<Timer /> -> {showTimer && <Timer />}

• component에서 useState showTimer가 true일때만 Timer를 보여줄 수 있도록
• 버튼이 클릭될 때마다 showTimer가 변경된다.

 

//Timer.jsimport React, { useEffect } from 'react'

export default function Timer(props) {

    // 타이머가 맨처음 렌더링 됐을 때 
    //useEffect안에있는 콜백함수가 실행된다.
    //setInterval의 인자로 들어가있는 것을 1초마다 계속해서 실행해줌
    useEffect(() => {
        const timer = setInterval(() => {
            console.log('timer 돌아가는중')
        }, 1000)

        return () => {
            clearInterval(timer)
            console.log('타이머가 종료되었습니다.')
        }
    }, []) //화면 첫렌더링에만 실행이기에 빈배열

    return (
        <div>
            <span>타이머를 시작합니다.
                콘솔을 보세요
            </span>
        </div>
    )
}

 

1) Timer컴포넌트 실행

• Toggle Timer버튼을 누르면 Timer 컴포넌트가 마운트된다. (첫 렌더링)
• (Timer.js) useEffect안에 있는 콜백함수가 실행된다. 예문에는 setInterval콜백함수를 추가했고 인자로 들어가있는 console문을 1초에 한번 씩 찍게 해놨다.

 

2) Timer컴포넌트 종료

• unMount시 console.log가 종료되어야 한다.
• Timer의 리턴값으로 그 함수안에는 정리되는 내용을 넣어준다.
• 예시문은 setInterval을 끝내 줄 수 있는 함수로 clearInterval을 넣어주었다.