useEffect를 사용하기에 앞서 useEffect를 왜 사용하는지에 대해 이해하려면
Lifecycle에 대한 개념을 알아야 합니다.
컴포넌트가 생성(mount)이 되거나 재렌더링(update)이 되거나 삭제(unmount)가 될 수도 있습니다.
이 과정을 컴포넌트도 인생이 있다는 것에 비유해서 Lifecycle이라고 합니다.
이 컴포넌트 인생(Lifecycle) 중간중간에 원하는 코드를 실행시킬 수 있도록 도와주는 것이 바로 useEffect입니다.
컴포넌트가 장착이 될때 혹은 업데이트 될 때 특정 코드를 실행시킬 수 있다면 더 재밋는 기능을 개발할 수 있습니다.
예전 Lifecycle hook 쓰는 방법
class App extends React.Component {
componentDidMount(){
//App 컴포넌트가 로드되고나서 실행할 코드
}
componentDidUpdate(){
//App 컴포넌트가 업데이트 되고나서 실행할 코드
}
componentWillUnmount(){
//App 컴포넌트가 삭제되기전에 실행할 코드
}
}요즘 Lifecycle hook 쓰는 방법
import {useState, useEffect} from 'react';
const App = () => {
useEffect(()=>{
//여기 작성한 코드는 컴포넌트 mount 혹은 update시 실행됩니다.
});
return (
<>
<div></div>
</>
)
}- 만일 useEffect 안에 작성한 코드가 두번 실행된다면 index.js에 <React.StrictMode>를 제거해주면 한번만 실행됩니다.
<React.StrictMode>가 디버깅용으로 편하라고 2번 출력해주기 때문!
물론 useEffect 밖에 작성한 코드도 mount, update시 실행이 되지만 useEffect 안에 작성한 코드는 html 렌더링 이후에 동작합니다.
html 렌더링 이후에 동작한다는 얘기는 실행이 오래걸리는 코드들을 useEffect 안에 작성해놓으면 렌더링이 더 빠른 사이틑 구성할 수 있다고 할 수 있습니다.
- 시간 차를 두고 useEffect 안의 코드를 실행시킬 경우
import {useState, useEffect} from 'react';
const App = () => {
const [appear, setAppear] = useState(true);
useEffect(()=>{
//여기 작성한 코드는 컴포넌트 mount 혹은 update시 실행됩니다.
const timer = setTimeout(() => {
setAppear(false);
}, 2000);
}, []);
return (
<>
{appear == true ? <div>2초이내 구매시 할인</div> : <></>}
</>
)
}
- useEffect Dependency
import {useState, useEffect} from 'react';
const App = () => {
const [appear, setAppear] = useState(true);
const [inputValue, setInputValue] = useState('');
useEffect(()=>{
//여기 작성한 코드는 컴포넌트 mount 혹은 update시 실행됩니다.
const timer = setTimeout(() => {
setAppear(false);
}, 2000);
}, [inputValue]);
// 여기서 []의 역할은 useEffect 실행조건을 넣은 수 있습니다.
// []가 없을 경우에는 컴포넌트가 mount, update 될 때 실행됩니다.
return (
<>
{appear == true ? <div>2초이내 구매시 할인</div> : <></>}
</>
)
}Dependency
Dependency가 없을 때는 useEffect안의 코드는 컴포넌트가 mount, update 될 때 실행됩니다.
[변수]를 추가하게 되면 []안의 state가 변할때만 실행됩니다!
Dependency가 있어도 처음 mount될시에는 실행됩니다.
만약 Dependency안에 아무것도 않넣으면 컴포넌트가 mount시 1회만 실행하고 다시 실행하지 않습니다.
-> 1회만 실행시키고 싶으면 [] 형태로 작성하면 됩니다.
return
useEffect 안에 "return () => {}" 작성하게 되면 useEffect 동작 전에 실행됩니다.
예를 들어 clean up function을 통해 기존에 있던 코드 동작을 없앨 수 있습니다.(데이터 요청코드)
clean up function은 처음 mount시에는 실행되지 않고 unmount(삭제)시에는 실행됩니다.
import {useState, useEffect} from 'react';
const App = () => {
const [appear, setAppear] = useState(true);
const [inputValue, setInputValue] = useState('');
useEffect(()=>{
//여기 작성한 코드는 컴포넌트 mount 혹은 update시 실행됩니다.
const timer = setTimeout(() => {
setAppear(false);
}, 2000);
}, [inputValue]);
// 여기서 []의 역할은 useEffect 실행조건을 넣은 수 있습니다.
// []가 없을 경우에는 컴포넌트가 mount, update 될 때 실행됩니다.
return (
<>
clearTimeout(timer);
</>
)
}총정리
- 렌더링될 때마다 코드를 실행할 때
useEffect( () => {} );- mount시 한번만 코드를 실행할 때
useEffect( () => {}, []);- unmount시 한번만 코드를 실행할 때
useEffect( () => {
return () => {
}
}, []);- useEffect 실행 전에 코드를 실행할 때
useEffect( () => {
return () => {
clean up function
}
}, []);- 특정 state 변경시에만 코드를 실행할 때
useEffect( () => {
return () => {
}
}, [state 명]);