react - useEffect

useEffect란?

useEffect는 렌더링, 혹은 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트를 해주는 함수입니다.
맨 처음 useEffect는 렌더링이 끝난 후 실행 됩니다.
useEffect는 콜백 함수를 부르게 되며, 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작시킬 수 있습니다.

useEffect 사용방법

// 1. 거의 사용 X, Dependency가 없기 때문에 렌더링 할 때 한번 그리고 어떠한 작은 요소라도 변화한다면 시시때때로 useEffect가 발동되어 불필요한 실행이 너무 많아짐
useEffect(() => {});

// 2. useEffect를 렌더링 후 단 한번만 실행하고 싶을 때 사용하는 방법
useEffect(() => {}, []);

// 3. useEffect를 렌더링 후 한번, 그리고 배열 안 변수의 값이 변할 때마다 실행하는 코드입니다.
const [name, setName] = useState();
useEffect(()=> {}, [name]);

예시

// 위 사용방법 중 3번 예시
import React, { useEffect, useState } from 'react';

const Number = () => {
	const [number, setNumber] = useState(0); // useState로 number 변수를 0으로 초기화
    
    useEffect(() => {
    	console.log('hello');
    }, [name]});

	const nameChanger = () => setName('Mike');

  return (
		<div>
        	<button onClick={nameChanger}>change Name</button>
            <div>{name}</div>
        </div>
  ); // JSX 사이에 변수를 사용가능하며 중괄호를 이용합니다.
};

export default Number;