useEffect

useEffect

 

 

useEffet() 란?

 

• React Component가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 리액트 Hook임
• 특정 작업은 Component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻함
• 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 됨

┌ componentDidMount : 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행

├ componentDidUpdate : 리렌더링을 완료한 후 실행. 즉, render()가 업데이트 될 때마다 실행

└ componentWillUnMount : 컴포넌트를 DOM에서 제거할 때 실행

 

 

기본 형태

 

 

┌ function : 실행하고자 하는 함수

└ deps : 배열 형태. function을 실행시킬 조건
             deps에 특정값을 넣게 되면 컴포넌트가 mount 될 때, 지정한 값이 업데이트될 때 useEffect를 실행함

 

 

useEffect 함수 불러오기

 

 

 

ⓐ Component가 Mount 되었을 때(나타날 때)

 

┌ deps 부분을 생략한다면 해당 컴포넌트가 렌더링 될 때마다 useEffect가 실행되게 됨

└ 만약 맨 처음 렌더링 될 때 한번만 실행하고 싶다면 deps 위치에 빈 배열을 넣어줌

 

 

ⓑ Component가 Update 되었을 때

 

┌ 특정값이 업데이트 될 때만 실행하고 싶을 때는 deps 위치의 배열 안에 실행 조건을 넣어줌

└ 업데이트뿐만 아니라 마운터 될 때도 실행되므로 업데이트될 때만 실행시키고 싶다면 아래와 같은 방법을 사용함

 

 

 

 

ⓒ Component가 Unmount 되었을 때(사라질 때) & Update 되기 직전에

 

┌ useEffect는 함수를 반환할 수 있는데 이 함수를 cleanup이라고 함

├ Unmount 될 때만 cleanup 함수를 실행시키고 싶다면 deps에 빈 배열을,

└ 특정 값이 업데이트되기 직전에 cleanup 함수를 실행시키고 싶다면 deps에 해당 값을 넣어주면 됨