useEffect도 react의 hook 중 하나다.
첫번째 렌더링만, 혹은 특정 변수가 바뀔때만 실행하고 싶을때 쓰는 것이다.
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}Effect hook은 함수 컴포넌트에서 side effect를 수행할 수 있다.
side effect라고 함은 데이터 가져오기, 구독(Subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것 들이 포함된다.
React 컴포넌트에는 일반적으로 두 종류의 side effect로 나눌 수 있다. 정리(clean-up)가 필요한 것과 그렇지 않는 것으로 나뉜다.
Clean-up 을 이용하지 않는 Effects
- React 가 DOM을 업데이트 한 뒤로 추가로 코드를 실행해야 하는 경우가 있다. 네트워크 리퀘스트, DOM 수동조작, 로깅 등은 정리가 필요 없는 경우들이다.
그럼 useEffect 가 하는 일은 뭐야?
- useEffect Hook을 이용하여 우리는 React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야 하는지를 말한다.
useEffect를 컴포넌트 안에서 불러내는 이유가 뭔데?
- useEffect를 컴포넌트 내부에 둠으로써 effect를 통해 count state(또는 그 어떤 prop)에도 접근할 수 있게 된다. 함수 범위 안에 존재하기 때문에 특별한 API 없이도 값을 얻을 수 있는 것이다.
useEffect는 렌더링 이후에 매번 수행되는건가?
- 그렇다. 첫번째 렌더링과 그 이후의 모든 업데이트에서 수행된다. React는 Effect가 수행되는 시점에 이미 DOM 이 업데이트 되어있다.
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
}count state 변수를 선언 한 뒤 react에게 effect를 사용한다고 말하고 있다.
import { useState } from "react"
import { useEffect } from "react"
const ToDoList = () => {
const [toDoArray, SetToDoArray] = useState([])
const addToDo = (e) => {
e.preventDefault()
SetToDoArray([...toDoArray, e.target.todo.value])
e.target.todo.value = ''
}
useEffect(() => {
console.log(toDoArray)
console.log('toDoArray 값 바뀜!')
},[toDoArray]
)
return (
<div>
<p>My To DO List</p>
<form onSubmit = {addToDo}>
<input
type='text'
name='todo'
style={{ boxShadow:' 0 0 4px #000'}}
/>
<button type="submit">add To Do</button>
</form>
{toDoArray.map((toDo) => (
<div key={toDo}>
<p>{toDo}</p>
</div>
))}
</div>
)
}
export default ToDoList- useState를 사용해서 상태값 'toDoArray'와 해당 상태를 업데이트할 함수 'setToDoArray'를 정희했다.
- 'addToDo 함수는 폼을 제출할 때 호출되는 함수로 폼 입력값을 배열에 추가하고 입력 필드를 비운다.
- useEffect는 컴포넌트가 렌더링 될 때 마다 실행되는데, 두번째 인자로 전달된 배열 '[toDoArray]' 에 있는 값들이 변경될 때 마다 다시 실행된다.
- 입력 폼에서 To-DO 를 추가할 때 마다 'toDoArray'가 변경되기 때문에 'useEffect 안에 있는 코드는 To-Do 가 추가될 때 마다 실행횐다. 현재 useEffect 안에는 console.log 두개가 있고 매번 실행된다.
-useEffect 안에 작업을 정의하면 된다. 예를 들어 위 처럼 콘솔로그를 출력하거나 다른 상태값을 업데이트 할 수도 있다.
