4. React.js effects

state가 변화할 때 모든 component 들이 다시 실행되고 모든 code들도 다시 실행된다.

컴포넌트 내부의 코드중 일부는 처음 실행했을 때만 실행되고 state가 변화해도 다시 실행되지 않도록 하고 싶을때 effects를 사용한다.

 

useEffect의 기본 사용법은

useEffect(   , [   ])이고, 첫번째 아규먼트에는 실행되지 않게 하고싶은 함수의 이름을 넣고,

두번째 아규먼트 배열에는 특정 state(이 state가 변화할때만 첫번째 아규먼트에 들어간 함수를 실행시킨다.) 의 이름을 넣는다.

사용법 (예시)

function App() {

  const [counter, setCounter] = useState(0);

  const onClick = () => {

    setCounter((current) => current +1);

  }

 

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

  const onChange = (event) => {

  setKeyword(event.target.value)

  }

  console.log("항상 실행됩니다.")

 

 

  useEffect(()=>{

    console.log("한번만 실행됩니다.")

  }, []);

 

  useEffect(()=>{

  if (keyword !== "" && keyword.length > 5){

  console.log(`${keyword}가 변할때만 실행됩니다.`)

  }}, [keyword]);

  return (

    <div>

      <input value = {keyword} onChange = {onChange} type ="text" placeholder = "Search here..."></input>

     <h1>

      {counter}

     </h1>

     <button onClick = {onClick}>click me!</button>

    </div>

  );

}

 

 

 

console.log("항상 실행됩니다.")의경우 state인 counter, keyword가 변화할때 마다 콘솔에 출력된다.

 

useEffect(()=>{

    console.log("한번만 실행됩니다.")

  }, []);

의경우 컴포넌트가 실행될때만 출력되고, state가 바뀌어도 출력되지 않는다.

 

useEffect(()=>{

  if (keyword !== "" && keyword.length > 5){

  console.log(`${keyword}가 변할때만 실행됩니다.`)

  }}, [keyword]);

의경우 keyword state에 변화가 있을때, 키워드가 공백이 아닐때, 키워드의 길이가 5글자 이상일때 이 모든 조건을 충족시켜야 콘솔에 출력된다.

---

*useEffect cleanup  

useEffect의 두번째 아규먼트인 [ dependency ]에 아무것도 없다면 첫 렌더링시에 실행되고, useEffect의 첫번쨰 아규먼트의 return값은 컴포넌트가 삭제될때 실행된다.

ex.

function Hello()

{

useEffect( ( ) => { console.log("created");

return () => console.log("destroyed") } , [ ] );

}

return <h1>hello</h1>