useEffect

hgb072082·2022년 2월 13일
0

Front-end

목록 보기
18/30

useEffect 함수는 컴포넌트가 렌더링 될 때마다 특정한 작업을 발생시키는 Hook이다. 이로써 클래스형 컴포넌트에 있는 생명주기 메소드들을 함수형 컴포넌트에서도 useEffect로 사용할 수 있다.
useEffect(function, deps)

useEffect의 사용법은 useEffect(()=>{console.log('마운트 될 때만 실행')},[])

로 쓰게 되면 Component가 처음 mount됐을 때 (가장 처음 렌더링 될 때) 한 번만 실행하고 싶을 때는 deps 위치에 빈배열을 넣는다.

만약 배열을 생략한다면 리렌더링 될 때 마다 실행된다.

useEffect(()=>{console.log('업데이트 될 때 실행된다')}, [name])

처럼 사용하면 Component가 update 될 때마다 (특정 props 나 state가 바뀔 때마다) 실행된다.

특정값이 업데이트 될 때 실행하고 싶을 때는 deps 위치의 배열 내에 해당 값을 넣어준다.

그리고 useEffect(()=>{ return() },[])

처럼 콜백함수에 return 값을 넣으면 Component가 unmount 될 때 (사라질 때) return 내부의 함수가 실행된다.

profile
개발개발

0개의 댓글