Frontend 개발자 - hyo.loui

리액트 - useEffect 핵심 기능 본문

React.js

리액트 - useEffect 핵심 기능

hyo.loui 2022. 12. 12. 20:59

useEffect

 

useState와 같이 리액트에서 제공하는 hook 이기 때문에 import를 해야 사용이 가능하다

 

핵심기능 : component가 렌더링 될 때 바로 실행이 된다

 

동작 방식 : 화면에 컴포넌트가 보여졌거나 사라졌을때 무언가를 실행한다. 정확히는 component가 화면에 mount, unmount 되었을 때  실행이 된다. (react lifecycle)

 

import 구문

 

 

의존성 배열이 없는 상태라면 value 가 바뀔 때 마다
(input에 타이핑하여 onChange가 일어날 때)

실행되지 않는다 

 

하지만 여기서 배열에 value 를 넣어주면 전과 같이 value가 바뀔 때 마다
콘솔에 'hello useEffect' 가 출력된다