React 기본 - UseEffect

UseEffect

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)

  console.log("i run all the time...");

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

버튼을 Click할 때마다 컴포너트가 Re-Rendering되어 console.log가 계속 찍히게 된다.

하지만 어떤 경우에는 한번만 실행시켜야 할때가 필요한데, 이럴때 UseEffect를 사용하면 된다!

 

import { useEffect, useState } 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("I run only once.")
  }, []);
  
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

useEffect 안에 있는 코드는 한번만 실행된다.

 

state 값의 변화를 감지하여 실행시킬 수도 있다.

useEffect의 2번째 인자에 state 변수를 넣어주면 해당 변수의 변경을 감지하여 함수를 실행시킨다.

import { useEffect, useState } 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("I run only once.")
  }, []);
  
  // count 값이 변경될 때마다 실행
  useEffect(() => {
    console.log("I run when 'counter' changes.. ", counter);
  }, [counter]);

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

 

여러개의 state를 감지하고 싶으면 배열안에 ,(콤마)로 구분하여 넣어준다.

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)

  console.log("i run all the time...");

  // 한번만 실행. 아무도 watch하지 않는다!!
  useEffect(() => {
    console.log("I run only once.")
  }, []);
  
   // keyword의 변화를 감지하여 실행
  useEffect(() => {
    if (keyword !== "" && keyword.length > 5) {
      console.log("I run when 'keyword' changes.. ", keyword);
    }
  }, [keyword]);
  
  // counter의 변화를 감지하여 실행
  useEffect(() => {
    console.log("I run when 'counter' changes.. ", counter);
  }, [counter]);
  
  // keyword와 counter의 변화를 감지하여 실행
  useEffect(() => {
    console.log("I run when 'keyword & counter' changes.. ", counter);
  }, [keyword, counter]) ;

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

export default App;

 

 

+

CleanUp

Componenet가 destroy될 때 실행하는 함수이다.

import { useEffect, useState } from "react";

function Hello() {
  useEffect(() => {
    console.log("Hello");
    return () => console.log("Bye");
  }, []);

  return <h1>Hello</h1>
}

function App() {
  const [showing, setShowing] = useState(true);
  const onClick = () => setShowing((prev) => !prev);
  
  return (
    <div>
      {showing ? <Hello/> : null}
      <button onClick={onClick}>{showing ? 'Hide' : 'Show'}</button>
    </div>
  )
}

export default App;

컴포넌트가 마운트 될 때 console.log("Hello"); 코드가 실행되고, 컴포넌트가 언마운트 될 때 console.log("Bye"); 코드가 실행된다.

 

 

 

😎 관련게시글

React 기본 - Component, Props, Event