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;
'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 |
댓글
이 글 공유하기
다른 글
-
React useState
React useState
2021.05.14 -
React Event (이벤트 추가)
React Event (이벤트 추가)
2021.05.13 -
className (클래스 네임)
className (클래스 네임)
2021.05.12 -
React Array (배열 출력)
React Array (배열 출력)
2021.05.11
댓글을 사용할 수 없습니다.