[React] 5. Effect

본 게시글은 노마더코더의 ReactJS로 영화 웹서비스 만들기 코스를 수강하며 정리한 글입니다.

 

prev

current처럼 state를 가져오는 함수

 

import {useState, useEffect} from "react"

useState 등 사용할 때 import

 

useEffect(effect, dependency)

 

특정 코드가 실행 시기를 설정하고 싶다. ex ) API 로딩 - Component의 첫 로딩 시만 코드 실행

이 경우에는 useEffect를 사용한다.

 

React는 State가 변할 때 마다 리렌더링한다.

이는 UI관점에서는 좋을 수 있지만 특정 시점에만 실행하고 싶은 코드가 있을 수 있다.

특정 시점에만 코드를 리렌더링(실행)하고 싶을 때 사용한다.

dependency = []안에 keyword를 넣어주면 keyword가 바뀔때만 실행되고

아무것도 넣지 않으면 최초 로딩시만 실행된다.

배열 자체가 없다면 최초 로딩 시와 매 state 업데이트 시 실행된다.

dependency는 react가 바뀌는지 지켜보는 대상을 의미한다.

State가 바뀌어 리렌더링 되어도 dependency가 아니면 실행하지 않는다

 

Clean up Function

컴포넌트가 제거(destroy)될 때도 일을 하게 해주는 것.

useEffect()의 return에 함수를 정의해주면 된다.

 

return ()=> ... or 함수이름