useEffect란

useEffect를 알기위해선 side Effect를 알아야한다.

Side Effect란?

React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽는다. 대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장하는데 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문이다.

useEffect는 React에서 제공 내장 라이브러리 api 함수로 Side Effect를 함수형에서 사용할 수 있게 하는 리액트 hooks이다.

사용법

useEffect의 기본형태는

useEffect( function , deps)

• function : 수행하고자 하는 작업( ex)실행시킬 함수)
• deps : 배열형태로 배열안에 검사하고자 하는 특정 값,혹은 빈배열

1. 처음 렌더링 됐을때 (나타났을때)

	useEffect(()=> {
		console.log("나타났을때만 호출")
    },)

만약에 처음 렌더링 될 때 한번만 실행되게 하고 싶다면 deps위치에 빈배열을 넣는다 .

	useEffect(()=> {
		console.log("나타났을때만 호출")
    },[])

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

2. 컴포넌트가 업데이트 될때 (특정 props, states가 바뀔때)

	useEffect(()=> {
		console.log("나타났을때만 호출")
    },[props(바뀌는값)])

3. 컴포넌트가 사라질때 & 사라기지 직전에

	useEffect(()=> {
		console.log("나타났을때만 호출")
      return console.log("클린업 함수")
    },)

return 뒤에 출력되는게 클린업 함수이다. 만약 언마운트 될때만 클린업 함수를 실행시키고 싶으면 뎁스에 빈배열을 넣으면 된다.

특정값이 업데이트되기 직전에 클린업 함수를 실행 시키고 싶으면 뎁스에 특정 값을 넣어주면 된다.