[React] useEffect

useEffect

react.js에서는 component를 새로고침 한다. 즉 새로운 데이터가 들어올 때마다 UI를 refresh 한다.

하지만 필요하지 않은 경우에는 이 장점이 문제가 될 수도 있다. 처음 실행될 때 혹은 컴포넌트 안에 특정 데이터가 변화할 때만 실행하고 싶은 경우가 있을 수도 있기 때문이다.

이런 경우 useEffect는 컴포넌트가 화면에 나타날 때, 사라질 때, 업데이트 될 때 다시 렌더링을 해주는 함수이다.

---

 

아래 코드는 버튼 클릭시 counter변수가 1씩 증가하도록 하는 코드로 로그를 찍어 확인해보면 state가 변경될 때마다 다시 렌더링 된다.

import { useState } from "react";

function App() {
  const [counter,setValue]=useState(0);
  const onClick=()=>setValue((prev)=>prev+1);
  console.log('render');
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

이와 같은 상황에서 필요하지 않은 부분을 다시 렌더링 하지 않는 방법? => useEffect 사용

 

useEffect는 두 개의 argumentm를 가지는 함수이다.

첫 번째 인자는 실행시키고 싶은 코드, 두 번째 인자는 의존 값이 들어있는 배열(Dependencies)이다.

Dependencies란 react.js가 지켜보아야 하는 것들로 Dependencies가 변화할 때 react.js가 코드를 실행시킨다.

 

import { useState,useEffect } from "react";

function App() {
  const [counter,setValue]=useState(0);
  const onClick=()=>setValue((prev)=>prev+1);
  console.log('i run all the time');
  const iRunOnlyOnce=()=>{
    console.log('i run only once.')
  }
  useEffect(iRunOnlyOnce,[])
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

위 코드를 실행해보면 다음과 같이  console.log('i run all the time');는 state가 변할 때마다 매번 실행되는 반면 iRunOnlyOnce() 함수는 한 번만 실행되는 것을 알 수 있다.

위에서 실행되는 useEffect는 console.log코드를 실행하고 dependency는 가지고 있지 않다. 이것은 react.js가 지켜볼 대상이 없기 때문에 코드가 한 번만 실행될것이라는 걸 의미한다.

버튼을 7번 클릭 했을 시 콘솔 화면

 

useEffect() 코드를 조금 더 단순화해보면 다음과 같다.

import { useState,useEffect } from "react";

function App() {
  const [counter,setValue]=useState(0);
  const onClick=()=>setValue((prev)=>prev+1);
  console.log('i run all the time');
  useEffect(()=>{
    console.log('CALL THE API...');
  },[]);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

즉, useEffect함수는 코드가 한번만 실행될 수 있도록 보호한다.

 

검색을 위한 input 태그를 추가해보자.

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

위에서 작성한 input 태그는 keyword와 setKeyword라는 props를 가지며 입력값에 따라 keyword의 state가 변한다.

const [keyword,setKeyword] = useState("");
const onChange=(event)=>setKeyword(event.target.value);

 

다음은 useEffect() 사용 부분이다.

첫 번째는 처음 로딩될 때 실행되는 코드이고,

두 번째는 keyword값이 변화할 때, 세번째는 counter값이 변화할때,

마지막은 keyword 또는 counter값이 변화할때 실행되는 코드이다.

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])

 

=>useEffect를 사용하면 코드를 언제 실행할지 선택할 수 있다.

 

 

전체 코드

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);
  console.log('i run all the time');
  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;