[React] #5 Effects- ReactJS 로 영화 웹 서비스 만들기

useEffect 란?

component 가 처음 render 될 때만 코드를 실행하고 싶거나 특정 state가 변할 때만 코드를 실행할 수 있도록 하는 Hook

useEffect( function, dependency )

• function : 수행하고자 하는 작업
• dependency: 배열 형태로 function을 실행시킬 조건
  • [] : 처음 실행(렌더)시에 딱 한번만 실행
  • [object] : 해당 리스트의 값이 변화할 때만 실행

 

예제)

import { useState, useEffect } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setValue((prev) => prev + 1);
  const onChange = (event) => {
    setKeyword(event.target.value);
  }

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

export default App;

 

Cleanup Function 이란?

component가 파괴될 때 실행되는 함수로 useEffect return 시 사용한다.

clean-up 함수를 사용하게 되면 렌더링이 될 때, 이전에 남은 함수가 실행되어 메모리 누수가 일어나는 일을 막을 수 있다.

useEffect(() => {
  console.log("created :)");
  return () => console.log("destroyed :(");
}, []);

function Hello() {
	function byFn() {
    	console.log("bye :(");
    }
    function hiFn() {
    	console.log("hi :)");
        return byFn;	// componenet가 파괴될 때 hiFn이 return한 function 실행
    }
    useEffect(hiFn, []);
    return <h1>Hello</h1>;
}