React - Lifecycle & useEffect

React 의 Lifecycle

mount ( 페이지가 눈에 보이도록 장착 )

update ( 페이지가 업데이트 될 때 )

unmount ( 페이지가 제거될 때 )

 

컴포넌트의 Lifecycle 에 간섭하는 방법

class 컴포넌트에서 사용하는 방법( 옛날 방식 )

 

함수형 컴포넌트에서 사용하는 방법

 

useEffect 라는 훅을 사용합니다.

 

useEffect 훅을 사용하는 이유

• useEffect 는 실행시점이 약간 다릅니다. 컴포넌트 안에 코드들은 그냥 바로 실행이 되는데, useEffect 안에있는 코드들은 html 랜더링이 다 끝나고나서 실행이 됩니다.
• 이것이 왜 장점인가 복잡하고 시간이 오래걸리는 코드가 있다고 할 때 useEffect 없이 그냥 코드를 작성하게되면 이 연산이 끝나는 1 ~ 2 초 정도는 화면에 아무것도 보이지 않게 됩니다.

 

• 그럴 때 이런 복잡한 코드를 useEffect 에서 실행한다면 html 의 랜더링이 모두 끝난 후에 작동하므로 좀 더 효율적으로 동작하게 만들 수 있다는 장점이 있습니다.

 

보통 useEffect 안에 적는 코드들

• 어려운 연산
• 서버에서 데이터를 가져오는 작업
• 타이머 장착할 때

 

왜 이름에 Effect 가 들어가는가?

• 보통 프로그래밍에서는 Side Effect 라는 말을 많이 사용합니다. Side Effect 란 함수의 핵심 기능과 상관없는 부가기능을 의미합니다.
• 리액트를 만든 사람이 함수의 핵심 기능인 html 랜더링 이외에 다른 부수적인 코드들을 적는다는 의미에서 이름에 Effect 를 사용했다고 합니다.

 

응용하기

이벤트 태그를 추가해서 2초동안만 보이고 2초가 지나면 사라지도록 간단한 타이머 기능을 구현했습니다.

 

여기서 useEffect 의 디펜던시 ( 실행조건을 넣을 수 있는 곳 ) 를 활용하면 좀 더 깔끔하게 만들 수 있습니다.

• 디펜던시란 useEffect 의 두번째 파라미터값으로 들어가는 부분을 의미합니다.
• 디펜던시 없이 사용하면 mount, update 시에 useEffect 가 실행되지만, 디펜던시를 사용하면 디펜던시 안에 변수의 값( 여기서는 count )이 변할 때 마다 실행이 됩니다. ( 변수명을 넣지 않고 [] 라고 넣으면 딱 한번만 실행됩니다. )

 

• useEffect 의 또 다른 사용법으로는 아래와같이 return 을 적어주면 useEffect 가 실행되기 전에 return 에 적은 코드가 먼저 실행되게 할 수 있습니다. ( 이걸 clean up function( 클린업 펑션 ) 이라고 합니다. ) ( useEffect 안에 클린업 펑션( return ()=>{} ) 은 mount 에는 실행되지 않고 unmount 에만 실행됩니다. 즉 페이지를 닫을 때( 재랜더링할 때도 unmount 됩니다. ) 실행되는 것입니다. )

 

• 리액트는 랜더링이 잦은 특성이 있기 때문에 useEffect 에 위와같이 타이머를 만들어둔 경우에 타이머가 랜더링 할 때 마다 무제한으로 계속 생겨버릴 수도 있습니다. 그래서 아래와 같이 return 안에 기존에 있던 타이머를 제거하는 코드를 적어두면 그런 문제점을 해결할 수 있습니다.

 

• 타이머 이외에도 만약 useEffect 에 서버에 데이터를 요청하는 코드가 있는 경우에 랜더링 될 때 마다 서버에 데이터를 요청해서 버그가 발생할 수 있기 때문에 return 안에다가 기존에 데이터를 요청하던 코드를 제거하는 로직을 적어두면 좋습니다.