React-useEffect

함수형 컴포넌트 useEffect

state가 변경되면 모든 컴포넌트가 리렌더링된다.

state값이 변경될때 리렌더링 되는 컴포넌트를 조작할수있다.

useEffect의 첫번째 인자는 한번만 실행할 함수

두번째 인자는 배열로 빈값을 넣거나 state 값을 넣어준다.

두번째 인자 배열에 빈값이 아닌 state값이 들어간다면 해당 state 값이 변경될때만 실행이 된다.

function App() {

  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");

  const onChange = (event) => {setKeyword(event.target.value);}
  const onClick = () => {setValue((counter) => counter+1);}

  // state가 변경될때 항상 실행
  console.log("i run all the time");

  const iRunOnlyOne = () => {
    console.log("i run only once");
  }
  // 한번만 실행
  useEffect(iRunOnlyOne,[]);

  // keyword가 변경될때 실행
  useEffect(() => {console.log("I run when 'keyword' changes.")},[keyword]);

  // counter가 변경될때 실행
  useEffect(() => {console.log("I run when 'counter' changes.")},[counter]);

  // keyword 또는 counter가 변경될때 실행
  useEffect(() => {console.log("I run when keyword & counter change")},[keyword, counter]);

  return (
    <div>
      <input value={keyword} onChange={onChange} type="text" placeholder='Search here...' />
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  )
}

clean up

useEffect 는 한번만 실행할수 있게 하는 Hooks이다.

Hello라는 컴포넌트가 생성될때 최초에 한번만 실행하게 useEffect로 설정하였다.

삭제할때는 당연 삭제되니까 아무것도 실행되지 않는다.

하지만 삭제할때 무언가 실행시키고 싶을때는 return을 해주면 된다.

function Hello() {
  
  useEffect(() => {
    console.log("hi :)");
    return () => {console.log("bye :(");}
  },[])

  return (
    <div>
      <h1>hello</h1>
    </div>
  )
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => {
    setShowing((prev) => !prev);
  }
  return (
    <div>
      {/* 자바스크립트 코드를 쓸땐 중괄호{} 를 써야한다. */}
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>

  )
}

생성될때 hi :)

삭제될때 by :( 이다.

위의 코드가 복잡하다면 같은 동작을 하는 아래의 코드를 보고 이해해보자(그래도 제일 짧다.)

  useEffect(function () {
    console.log("hi :)");
    return function() {
      console.log("bye :(");
    };
  },[]);

  function byFn() {
    console.log("bye :(");
  }

  function hiFn() {
    console.log("hi :)");
    return byFn
  }

  useEffect(hiFn,[]);