useEffect란 ?

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.

useEffect 선언방법

첫 번째 인자는 함수 , 두 번째 인자는 배열이 들어간다.

<script>
	import react, { useEffect } from "react";
	useEffect(effect, [, deps]);
</script>

1. effect

렌더링이 될 때마다 실행되는 함수

useEffect의 배열을 전달하지 않으면 된다.

<script>
import { useState, useEffect } from "react";

function Button() {
  const [result, setResult] = useState(0);
  const onClick = () => setResult(result + 1);
  useEffect(() => {
    console.log("render !");
  });
  return (
    <div>
      <button onClick={onClick}>Hello : {result}</button>
    </div>
  );
}
export default Button;

</script>

최초 렌더링시에만 실행되는 함수 ( [ ] 배열 사용 )

빈 배열을 넣어주면 최초 렌더링을 했을 때만 실행된다.

<script>
import { useState, useEffect } from "react";

function Button() {
  const [result, setResult] = useState(0);
  const onClick = () => setResult(result + 1);
  useEffect(() => {
    console.log("render !");
  }, []);
  return (
    <div>
      <button onClick={onClick}>Hello : {result}</button>
    </div>
  );
}
export default Button;

</script>

특정 값이 변경될 때만 실행되는 함수

[ ] 배열안에 특정한 값을 넣어주면 그 값이 변경될 때만 실행된다.

<script>
import { useState, useEffect } from "react";

function Button() {
  const [result, setResult] = useState(0);
  const onClick = () => setResult(result + 1);
  useEffect(() => {
    console.log("render !");
  }, [result]);
  return (
    <div>
      <button onClick={onClick}>Hello : {result}</button>
    </div>
  );
}
export default Button;

</script>