useEffect 이해하기

useEffect란?

리액트 컴포넌트의 사이드 이펙트를 제어하는 새로운 React Hook

사이트 이펙트란?

우리말로 "부작용"이라는 뜻으로 리액트에서는 "부수적인 효과", "파생되는 효과"정도로 해석가능 

 

React 컴포넌트의 사이드 이펙트 

컴포넌트의 동작에 따라 파생되는 여러 효과,

컴포넌트에 어떤 값이 변경되었을 때 특정코드를 실행시키거나(콘솔에다가)

또는 라이프 사이클을 제어하는것(Mount, Update, UnMount 때 특정 코드를 실행 시키는 것)

useEffect(()=>{
	// mount
	컴포넌트가 생길 때 수행 작업
	return{ // cleanup
	//unmount
	컴포넌트가 사라질 때 수행 작업
	}
},[의존되는 값들]);

출처: https://devyihyun.tistory.com/180 [이롭게 현명하게:티스토리]

1. 

count 카운트앱에서 useState값이 바뀌었을때 우리가 원하는 수행동작을 하도록 할수 있다

(const [count, setCount] = useState(0)

useEffect(() => {
	console.log(`count: ${count})
}, [count])

//count 값이 바뀔때 마다 count값을 console.log에 출력

2번째 인수로 들어간 배열의 값이 바뀌게 되면(의존되는 값들), 값이 변경될 때 호출이 되고

 

2.

업데이트 제어하는 방법

useEffect(() => {
	console.log("update")
})

// 2번째 인수(배열) 생략하기

그럼 처음 mount 시점에 update가 동시에 한번 출력이 되고 그리고 나서 버튼을 눌러서 컴포넌트를 리엔더링 시키면 그럴때 마다(컴포넌트가 리렌더링 될때마다) update가 콘솔에 계속 출력되는걸 볼 수가 있다

만약 mount가 실행되고 나서 update가 되는 순간에만 콜백함수를 실행하고 싶다면 현재 App컴포넌트가 mount가 되었는지 안되었는지 체크하는 변수를 useRef를 이용해서 만들어 주면 된다

//App.jsx

const isMount = useRef(false);  //아직 이컴포넌트는 Mount가 되지 않았다는 의미로 false다
useEffect(() => {
	if(!isMount.current) {
    	isMount.current = true //이제 Mount가 되었다는 의미
        return
    }
    console.log("update")
})

// App 컴포넌트가 최초로 실행될떄 실행이 될텐데 밑에 console.log("update")는 실행이 될 수 없다

// return으로 강제종료했기 때문에