React Hooks 복습_2

useEffect 훅이란

어떠한 컴포넌트가 mount, update, unmount 되었을 때 특정 작업을 처리하고 싶다.
=> useEffect를 사용한다.

useEffect는 인자로 콜백함수를 받는다.

1 유형

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

--> 렌더링 될 때마다 실행

2 유형

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

--> 이게 dependency array라고 한다.
화면에 첫 렌더링일 될때 + value 값이 바뀔때 실행

3 유형

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

--> 이게 dependency array라고 한다.
화면에 첫 렌더링일 될때

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState("");

  const handleChangeCount = () => {
    setCount(count + 1);
  };

  const handleChangeName = (e) => {
    setName(e.target.value);
  };

  //렌더링 될때마다 매번 실행됨.
  //업데이트 버튼을 누르거나 input에 값을 입력할 때마다
  useEffect(() => {
    console.log("렌더링");
  });

  //count 값이 바뀔때만 + 마운트
  //업데이트 버튼을 누를때마다 실행
  useEffect(() => {
    console.log("count 변화");
  }, [count]);

  //name 값이 바뀔때만 + 마운트
  //input 값에 입력 시 실행
  useEffect(() => {
    console.log("name 변화");
  }, [name]);

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

  return (
    <div>
      <button onClick={handleChangeCount}>Update</button>
      <span>count : {count}</span>
      <p />
      <input type="text" value={name} onChange={handleChangeName} />
      <span>name:{name}</span>
    </div>
  );
}

export default App;

첫 렌더링 시 두번씩 출력되는 것은 strict모드 때문이다.