useEffect

컴포넌트가 렌더링 될 때마다 side-effect를 처리하는 작업을 해주는 Hook으로 최초에 한번은 무조건 동작한다.

useEffect는 실행 시 두 가지 인자를 받는다.

 

1. 첫 번째 인자
   • 'useEffect'가 호출될 때마다 side-effect를 정의하는 함수
2. 의존성 배열
   • side-effect의 상태 변화를 감지
   • 해당 배열에 포함된 요소의 상태가 변화되어야 side-effect를 실행시킨다.
   • 빈 배열이라면 최초에 한 번만 실행된다.

import React, { useEffect } from "react";

function Example(){
	useEffect (() => {
    	//side-effect를 실행하는 함수
        console.log('컴포넌트가 화면에 나타남');
        
        return() => {
        //clean-up 함수 (선택적)
        console.log('컴포넌트가 화면에서 사라짐');
        
        };
    }, [Dependency array]);
};

< 문제 >

1. useState를 사용해서 버튼 생성하기

+ 버튼 : 숫자를 1씩 증가 / - 버튼 : 숫자를 1씩 감소

2. 3의 배수가 되면 '짝' alert 띄우기

import React, { useState, useEffect } from "react";

export function Example() {
  const [count, setCount] = useState(0);

  const plus = () => {
    setCount(count + 1);
  };
  const minus = () => {
    setCount(count - 1);
  };

  useEffect(() => {
    if (count % 3 == 0 && count != 0) alert("짝");
  }, [count]);

  return (
    <div
      style={{
        height: "100vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div style={{ fontSize: "30px" }}>You clicked {count} times</div>

      <div style={{ display: "flex", flexDirection: "row", margin: "20px" }}>
        <button style={{ margin: "5px" }} onClick={plus}>
          +
        </button>
        <button style={{ margin: "5px" }} onClick={minus}>
          -
        </button>
      </div>
    </div>
  );
}