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;

'SPA > React.js' 카테고리의 다른 글

React useState  (0) 2021.05.14
React Event (이벤트 추가)  (0) 2021.05.13
className (클래스 네임)  (0) 2021.05.12
React Array (배열 출력)  (0) 2021.05.11
Component Wrapping (컴포넌트 감싸기)  (0) 2021.05.10