React - useEffect Hook
언제 사용?
- react 컴포넌트가 처음 화면에 나타날 때
- 사라질 때
- 컴포넌트의 상태가 업데이트될 때
- 리렌더링 될 때마다 어떤 작업 반복할 때
※ 마운트 / 언마운트
- 마운트는 컴포넌트가 나타나는 것
- 언마운트는 사라지는 것(삭제 같은 것 수행할 때)
- UserList.js -
1. 상단에 useEffect 선언
import React, { useEffect } from 'react';
2. useEffect 사용 - 마운트될 때
function User({ user, onRemove, onToggle }){
const {username, email, id, active} = user;
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
}, []);
return (useEffect 함수 내에서 뒤에 빈 배열로 들어간 파라미터는 deps(dependence) 의존되는 값들이 들어감
-> 만약 이 값들이 비어있다면, 컴포넌트가 처음 화면에 나타날 때에만 실행이 된다.
이렇게 나타남 - 만약 입력값 추가되면 또 나타남
3. 컴포넌트가 사라질 때, 언마운트
그냥 return만 추가해주면 됨
function User({ user, onRemove, onToggle }){
const {username, email, id, active} = user;
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
return () => {
console.log('컴포넌트가 화면에서 사라짐');
}
}, []);
return (
※ 참고(주석들)
function User({ user, onRemove, onToggle }){
const {username, email, id, active} = user;
useEffect(() => {
console.log('컴포넌트가 화면에 나타남');
// 여기서 할 수 있는 작업들
// props -> start
// REST API
// D3 Video.js
// setInterval, setTimeout
return () => {
// clearInteval, clearTimeout(setInterval, setTimeout 제거)
// 라이브러리 인스턴스 제거
console.log('컴포넌트가 화면에서 사라짐');
}
}, []);
4. useEffect함수에 배열 비어있는데, 거기에 user값이 들어간다면 어떻게 될 지
function User({ user, onRemove, onToggle }){
const {username, email, id, active} = user;
useEffect(() => {
console.log(user);
}, [user]);
[user]을 넣으면 user값이 변경될 때마다 이 함수 호출하게 된다.(처음 마운트 될 때도 포함)
5. 뒷정리 함수(clear함수) 추가했을 때
useEffect(() => {
console.log(user);
return () => {
console.log('user 값이 바뀌기 전');
console.log(user);
}
}, [user]);
※ 만약에 useEffect에 있는 함수에서 props로 받아온 값을 참조하거나,
useState로 관리하고 있는 값이 있다면, deps에 꼭 넣어주어야 함
6. deps를 쓰지 않았을 경우
브라우저 렌더링 됐을 때, 컴포넌트 한 부분만 실행했을 때 등 모든 컴포넌트에서 useEffect가 실행됨
-> React 컴포넌트에서는 부모 컴포넌트가 리렌더링이 되면, 자식 컴포넌트도 리렌더링이 됨
Ex) User 컴포넌트의 부모 컴포넌트는 UserList 컴포넌트, UserList 에서 users가 변경이되면 UserList가 리렌더링 될 때,
모든 User 컴포넌트가 변경이 된다.
-> 브라우저 상에는 내용이 바뀌지거나 하진 않지만, virtual DOM 내부에서는 모든 컴포넌트가 리렌더링 되는 것
=> deps 안쓰면, 내용이 많아지면 브라우서 느려지게 될 가능성 있음(최적화)