useEffect란?
useEffect는 컴포넌트가 렌더링 될 때 특정 작업을 실행할수 있도록 하는 Hook이다.
장점
- 함수형 컴포넌트에서도 생명주기 메소드를 사용할 수 있다.
- 오래걸리는 함수의 경우 UI 렌더링을 블록킹 할 수 있다.
쓰는 이유
- 자신이 원할 때 원하는 함수를 실행할 수 있다.
- 특정 코드들이 컴포넌트가 처음 생성될때만 실행되게 바꿀 수 있다.
사용법
import { uesEffect } from 'react';
useEffect(() -> {
// 실행문
})아래 코드는 빈 디펜던시를 추가한 useEffect이다.
useEffect(() -> {
// 실행 문
}, [])위 코드는 컴포넌트가 처음으로 사용 되었을 때 실행된다. 즉 딱 한 번만 실행 된다는 뜻이다.
다음은 디펜던시에 값을 넣은 경우이다.
let count = 1
useEffect(() -> {
}, [count])위 코드는 useEffect 함수가 디펜던시에 의존해서 실행되기 때문에 count의 값이 변할 때 마다 실행된다.
즉 count의 값이 1, 2, 3 ... 처럼 값이 변하면 useEffect 함수가 실행된다.
