useEffect

useEffect

• useEffect란?
  : 어떤 컴포넌트가 Mount(화면에 첫 렌더링), Update(다시 렌더링), Unmount(화면에서 사라질 때) 코드를 실행시킬 수 있다.
• useEffect는 (콜백함수, 배열)을 인자로 갖는다.
  : 콜백함수로 실행될 코드를 작성할 수 있다.
  : 배열은 dependency Array라고하며, 생략할 수 있다.
  : 배열이 생략되는 경우 Mount, Update, Unmount 상황 모두 코드가 실행된다.
  : 배열에 요소를 갖는 경우 Mount와 배열 요소의 값이 변할 때 코드가 실행된다.
  : useEffect ( ( ) => { 실행될 코드 } ) ; 
  : useEffect ( ( ) => { 실행될 코드 } , [ dependency Array] ) ;
• import { useEffect } from 'react' ;로 사용을 알린다.

useEffect 선언

• useEffect( ( ) => { } ) ;
  : 모든 렌더링에 실행된다.
• useEffect( ( ) => { } , [ ] ) ;
  : 첫 렌더링에 실행된다.
• useEffect( ( ) => { } , [ value ] ) ;
  : 첫 렌더링, value값이 바뀔 때 실행된다.

useEffect 살펴보기

• useEffect를 다양한 방법으로 선언했다.
• 어떤 상황에 동작하는지 콘솔창을 열어 확인할 수 있다.

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

function App () {
  const [num, setNum] = useState(0);
  let num2 = 0;

  function stateNum() {
    let newNum = num + 1;
    setNum(newNum);
    num2 = num2 + 1;
    console.log(num2);
  }

  // 렌더링 마다 실행된다.
  useEffect(() => { console.log("num : "+num+" > useEffect( ( ) => { } )") });
  
  // Mounting 되었을 때 실행된다.
  useEffect(() => { console.log("num : "+num+" > useEffect( ( ) => { } , [ ])")},[]);
  
  // num이 변경되었을 때 실행된다.
  useEffect(() => { console.log("num : "+num+" > useEffect( ( ) => { } , [ num ])")},[num]);
  
  // let으로 선언된 num2는 변경되어도 실행되지 않는다.
  useEffect(() => { console.log("num : "+num+" > useEffect( ( ) => { } , [ num2 ])")},[num2]);

  return (
      <>
        <button onClick={stateNum}>state Num</button>
        <p>{num}</p>
      </>
  );
}


export default App;