useEffect

ReactJs는 기본적으로 state 가 변경될때 component는 새로 실행됨. (모든 code가 실행됨)

 

만약 버튼을 누르면 카운트가 증가하고, 키워드를 검색할 수 있는 프로그램이 있다고 가정하면

import {useState, useEffect} from "react";

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

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

위 처럼 코딩을 하면

 

버튼을 클릭하던가, input box에 텍스트를 입력할 때마다 전체가 랜더링 된다. 

 

화면 처음 로딩할때 외부 API를 통해서 데이터를 가져오는 코드가 있다고 하면.. 그것도 버튼클릭이나, text 입력시 반복 실행된다. 

 

이것을 막기위해 useEffect를 사용한다.

useEffect(처음에 한번만 실행될 내용(함수), []);           // 처음에 딱 한번만 실행될 내용을 지정

useEffect(함수, [counter]) ;                                           // counter 가 변할때만 실행됨 

 

useEffect의 두번째 인수에 [] 를 넣으면 첫번째 인수에 입력된 함수의 내용을 화면이 로딩될때 단 한번만 실행한다.. 

 

useEffect의 두번째 인수에 변수를 추가 해 주면 해당 변수가 변할때 , 첫번째 인수로 전달된 함수를 실행한다.

import {useState, useEffect} from "react";

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

    useEffect(()=> {
        console.log("Run only once... ");
    }, []);


    useEffect(()=> {
        console.log("counter is changed");
    }, [counter]);

    useEffect(()=> {
        console.log("keyword is changed");
    }, [keyword]);

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

잘 기억하자~~!!!