(6) React - Effect

# Effect란?

 

기본적으로 React.js는 component를 새로고침한다. 하지만 우리가 개발을하다보면

특정 component만 변하게하고 싶을수도 있다. 이때 필요한것이 useEffect!

=> state가 변화할때 code를 재실행시키는것!

 

# useEffect()의 기능(1)

특정 component 사용 확인을 하기위해 counter와 keyword value를 만들어 놓았다.

그리고 click을하면 counter수가 증가하고, input에 keyword를 입력하면 console에

문장이 찍힌다. 

useEffect(첫번째인자,[dependencies])를 사용하여

첫번째인자에는 실행하려는 코드

두번째인자에는 지켜보려는코드를 넣어주면 된다.

첫번째 useEffect는 대괄호에 아무것도 받지 않았기때문에 처음에만 찍히고,

두번째 useEffect는 처음시작할때 + keyword의 state가 setKeyword function에 의해 변했을때,

세번째 useEffect는 처음시작할때 + counter의 state가  setValue function에 의해 변했을때,

네번째 useEffect는 처음시작할때 + keyword와 counter의 state중 하나가 변했을때 console에 찍힌다.

import { useEffect, useState } 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);
  }
  useEffect(() => {
    console.log("I run only once");

  },[]);
  
  useEffect(() =>{
    console.log("I run when 'keyword' changes.")
  },[keyword]);

  useEffect(() => {
   console.log("I run when 'Counter' changes.");
  },[counter]);

  useEffect(() => {
    console.log("I run when keyword & counter changes.");
   },[keyword,counter]);
 

   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;

 

# useEffect()의 기능(2) - 잘 사용하지 않음 주의!

 

useEffect를 사용하면

component가 실행될때만이아니라 언제 destroy되었는지도 알수 있다.

component가 파괴될때, react.js가 hiFn이 return한 function을 실행하게 한다.

function Hello(){

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

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

  useEffect( hiFn,[]);
   
  return(
    <h1>Hello</h1>
  );
}