React useEffect

React에서 useEffect는 특정 상태가 변경될때마다 감지하여 다른 event를 수행해주는 Hook이다.

 

useEffect를 사용하기 위해서 import

import React, { useState } from 'react';

 

기본적인 사용

useEffect(() => {
  console.log('every event');
});

위와같이 쓰게 되면 모든 상태변화마다 event가 실행된다.

 

useEffect(() => {
    console.log('newTodo event');
  }, [todos]); 
});

useEffect에 두번째 인자로 배열을 던져줄수있는데,

이렇게 되면 해당 배열에 있는 상태가 변경될때 마다 event가 실행된다.

 

import React, { Component, useEffect, useState } from 'react';

function App() {
  // 기존 list todos
  const [todos, setTodos] = useState([]);
  
  // button를 누를때마다 추가되는 새로운 list newTodo
  const [newTodo, setNewTodo] = useState();

  const changeInputData = (e) => {
    setNewTodo(e.target.value);
  };

  const addTodo = (e) => {
    e.preventDefault();
    setTodos([...todos, newTodo]);
  }

  // 모든 상태변화마다 console이 찍힌다.
  useEffect(() => {
    console.log('every event');
  });

  // todos의 상태가 변화할때마다 작동한다.
  useEffect(() => {
    console.log('newTodo event');
  }, [todos]);  

  return (
    <React.Fragment>
      <h1>Todo App</h1>
      <form>
        // onChage 이벤트
        <input type="text" nmae="" onChange={changeInputData} />
        
        // onClick 이벤트
        <button onClick={addTodo}>Add Todo</button>
      </form>
    </React.Fragment>
  );
}

export default App;