React - useEffect

다음은 React Hook 중 일부인 useEffect에 대해 공부할 것이다.

useEffect란 리액트에서 기본적으로 제공하는 함수로써, useEffect함수가 포함된 컴포넌트가

처음 마운트 되거나 컴포넌트가 리렌더링 될 때 사용하는 Hook이다.

import { useEffect } from 'react';  -> useEffect를 사용하기위해 import 하는 방법이다.

 

1. useEffect의 기본 형태

useEffect(() => {
	... //실행할 내용들
});

useEffect의 기본 형태이다.

 

2. 비어있는 dependency 추가

useEffect(() => {
	... //실행할 내용들
}, []);

위와 같이 빈 배열일 경우 컴포넌트가 처음으로 마운트 되었을때 실행되므로, 초기에 한 번 실행이 필요할때만 

위와 같이 사용하면 된다.

 

3. dependency값 추가

const a = 10;

useEffect(() => {
	... //실행할 내용
}, [a]);

위와 같이 빈 배열안에 a라는 값을 넣을 경우, a가 변경될때마다 useEffect안에 정의된 코드 블록이 실행된다.

다음과 같이 예시를 들어보자.

초기에 0이란 값을 갖고있는 firstCount, secondCount를 선언해주었다.

둘의 차이점을 주기위해 useEffect를 사용해서 firstCount의 값이 변할때는 콘솔에 출력되게 하였다.

동영상은 올라가진 않지만 위에 카운터 증가를 클릭했을때만 콘솔창에 출력이되는 모습이다.

 

이처럼 useEffect에서 dependency 값이 변할때 마다 리렌더링돼서 콘솔창에 출력된다.