[React] useEffect

react

 

이 글은 별코딩강의를 기반으로 작성되었습니다! 

useEffect가 사용되는경우 

1. mount (화면에 첫 렌더링)

2. update(다시 렌더링)

3. UnMount(화면에서 사라질때) 

 

사용방식

1. 렌더링될때

useEffect의 사용방식에는 두가지 방식이 있음 

//1
useEffect(() => {
//작업
});


//2
useEffect(() => {
//작업
},[value]);

1. 렌더링 될때 마다 콜백 실행 

2. 화면에 첫 렌더링 될때 콜백 실행, value값이 바뀔떄 콜백 실행 (만약 빈배열을 준다면 컴포넌트가 제일 처음 렌더링 될때만 실행됨) 

 

1-1. 실습!! 

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

export default function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  const handleClick = () => {
    setCount(count + 1);
  };
  const handleInputChange = (e) => {
    setName(e.target.value);
  };

  //렌더링될때마다 매번 실행 -> 렌더링이후
  useEffect(() => {
    console.log('렌더링');
  });
  //마운팅 + count가 변화할때마다 실행됨
  useEffect(() => {
    console.log('count');
  }, [count]);

  //마운팅 + name가 변화할때마다 실행됨
  useEffect(() => {
    console.log('name');
  }, [name]);

  //마운트 될때만 실행
  useEffect(() => {
    console.log('마운트');
  }, []);

  return (
    <div>
      <div>
        <button onClick={handleClick}>증가~</button>
        <span>{count}</span>
      </div>
      <div>
        <input type="text" value={name} onChange={handleInputChange} />
        <span>{name}</span>
      </div>
    </div>
  );
}

 

 

2. Clean up(정리작업)

useEffect에 어떤 서비스를 구독하는 기능을 넣었다면, 나중에 이 구독을 해지해주는 Clean up(정리) 작업이 필요하다. 

useEffect(() => {
//구독.... 
	return () => {
    	//구독해지...
    }
},[]);

타이머를 만들고 나중에 타이머가 필요가 없을 때, 이벤트리스너를 등록해서 사용하다가 더이상 필요가 없을 때, useEffect의 return 값으로 함수를 넣어주면 된다. 그러면 해당 컴포넌트가 unmount될 때, 다음 렌더링시에 불릴 useEffect가 실행되기 이전에 return 속에 있는 함수가 실행된다. 

2-1. 실습!

 

의문점!! 왜... 타이머가 종료되었다는 말이 제일 먼저 뜨고 타이머가 돌아가는거지..?! 궁금하다 뭐야.....