useEffect

렌더링마다 매번 실행됨 -렌더링 이후
useEffect(() => {
console.log('렌더링 ✌')
});

마운팅 + count가 변화될때마다 실행
useEffect(() => {
console.log('👻 count 변화')
}, [count]);

마운팅 + [ item ] 변경될때만 실행
useEffect(() => {
console.log('👾 name 변화')
}, [name]);

마운팅됐을때 한번 실행
useEffect(() => {
console.log('마운팅 💫')
}, []);

---

practice_1

import React, { useState, useEffect } 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);
    }


    // 마운팅 + [ item ] 변경될때만 실행
    useEffect(() => {
      console.log('👾 name  변화')
    }, [name]);

return (
	<div>
    	<button onClick={handleCountUpdate}>Update</button>
      	<span>count : {count}</span>
      	<input type='text' value={name} onChange={handleInputChange}/> 
      	<span>name: {name}</span> */}
    </div>
);

---

practice_2

import React, { useState, useEffect } from 'react';
import Timer from './components/Timer';

function App() {
	const [ showTimer, setShowTimer ] = useState(false);

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

Timer.js (component)

import React, { useEffect } from 'react';

function Timer () {

  useEffect(() => {
    // 마운팅되었을대 실행되는 timer
    const timer = setInterval(() => {
      console.log('타이머 돌아가는중...')
    }, 1000);

    // 언마운트시 실행되는 return문
    return () => {
      clearInterval(timer);
      console.log('타이머가 종료되었습니다.')
    }
  }, [])

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

export default Timer;