1. LifeCycle
LifeCycle Method
1. 컴포넌트가 마운트될 때 : componentDidMount
2. 컴포넌트가 리렌더링될 때 : componentDidUpdate
3. 컴포넌트가 마운트 해제되기 전에 : componentWillUnmount
2. useEffect
useEffect: 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
- useEffect는 기본적으로 componentDidMount, componentDidUpdate, componentWillUnmount, getDerivedStateFromProps의 역할을 모두 한다.
const Into = () => {
const [name, setName] = useState('');
const [nickname, setNickname] = useState('');
useEffect(() => {
console.log('렌더링이 완료되었습니다.')
console.log({
name,
nickname
});
});
...→ input 내용을 변경할 때마다 name과 nickname이 console에 찍히는 것을 확인할 수 있다.
마운트될 때만 실행하고 싶을 때
- 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때에는 실행하지 않으려면 두번째 파라미터로 비어있는 배열을 넣어주면 된다!
componentDidMount()와 비슷하다.
useEffect(()=>{
console.log('마운트될 때만 실행됩니다.');
}, []);특정 값이 업데이트될 때만 실행하고 싶을 때
- useEffect의 두번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다. componentDidUpdate()와 비슷하다.
useEffect(()=>{
console.log(name);
}, [name]);- 배열안에는 useState로 관리하고 있는 상태, props로 전달 받은 값을 넣어줘도 된다.
컴포넌트가 언마운트나 업데이트되기 직전에 실행하고 싶을 때
- useEffect 뒷정리함수를 반환해보자!
useEffect(() => {
console.log('effect');
console.log(name)
return () => {
console.log('cleanup')
console.log(name)
};
},[name]);import {useState} from 'react';
import Info from './Info';
const App = () => {
const [visible,setVisible] = useState(false)
return (
<div>
<button
onclick = {() => {
setVisible(!visible);
}}
>
{visible ? '숨기기' : '보이기'}
</button>
<hr/>
{visible && <Info/>}
</div>
);
};- 컴포넌트가 나타날 때 콘솔에 effect가 나타나고, 사라질 때 cleanup이 나타난다.
- input에 이름을 계속 적어보면 렌더링될 때마다 (이름이 바뀔 때마다) 뒷정리 함수가 계속 나타나는 것을 확인할 수 있다.
- 뒷정리 함수가 호출될 때는 업데이트 되기 직전의 값을 보여준다.
- 언마운트될 때만 뒷정리 함수를 호출하고 싶다면 useEffect 함수의 두 번째 파라미터에 비어있는 배열을 넣으면 된다.
useEffect(() => {
console.log('effect');
return () => {
console.log('unmount')
};
},[]);출처:
