반응형
리액트 Hook 종류 중 하나인 useEffect에 대해 정리해본다.
useEffect는 component가 mount, unmount, update 됐을 때 특정 작업을 처리 할 수 있다.
componentDidMount
componentWillUnmount
componentDidUpdate
형태
useEffect( function, deps )
[ import ]
- hook을 사용하기위해 임포트.
// import
import React, { useEffect } from 'react';
[ mount ]
- 마운트 됐을 때 실행
useEffect(() => {
console.log('마운트!!');
}, []);
[ unmount ]
- 렌더링 될 때 마다 실행
- 컴포넌트가 렌더링 됐을 경우 딱 한번만 실행하고 싶을때는 deps위치에 빈 배열.
useEffect(() => {
console.log('렌더링!!');
});
[ update ]
- 특정 props, state 가 바뀔때 실행 ( 아래 코드에서는 name이 바뀔때마다 실행된다. )
useEffect(() => {
console.log(name);
console.log('업데이트!!');
}, [name]);
[ cleanup ]
반응형