[React] useEffect 실습

[React] useEffect 실습

useEffect 실습

이번 게시글에서는 useEffect 실습을 해보도록 하겠습니다.

- 윈도우 창 resize 이벤트를 알 수 있는 방법

- 1씩 증가하는 timer 만들기 (1)

- 1씩 증가하는 timer 만들기 (2) - 화면에 보여지지는 않음

위 3개의 실습을 해보도록 하겠습니다.

전체 코드 보러 가기 : 링크

 

◆ resize event

코드 보러가기 : 링크

useEffect에서 윈도우 resize를 등록하고 해지하는 것을 해보도록 하겠습니다.

그리고 윈도우 width 크기에 따라 컴포넌트의 배경 색을 변경하는 것을 해보도록 하겠습니다.

코드는 아래와 같습니다.

우선 코드 설명부터 간단하게 하겠습니다.

useEffect에서 마운트 시 resize 이벤트를 동록하였습니다.

언마운트 시 등록한 resize 이벤트를 해제하였습니다.

그리고 등록, 해제 시 callback 함수로 handleResize를 등록해주었습니다.

즉 윈도우 창 크기의 변경이 일어나면 위 결과 이미지처럼 해당 width, height이 출력됩니다.

이것을 활용하여 width 크기에 따라 컴포넌트를 숨기거나, 보여주거나, 변경하거나 등 작업을 할 수 있습니다.

여기서는 1개의 컴포넌트의 배경색을 변경해보도록 하겠습니다.

width 크기에 따라 잘 변경되는 것을 확인할 수 있습니다.

 

(+ 추후 나중에 custom hook을 배우면 이것을 더 깔끔하게 구현해보도록 하겠습니다.)

 

◆ 1씩 증가하는 timer 만들기 (1)

코드 보러가기 : 링크

CountTimer 컴포넌트를 아래와 같이 구현해보았습니다.

2개의 state와 useEffect로 구현해보았습니다.

2개 모두 정상적으로 1씩 증가하고 있습니다.

그러나 첫번째 useEffect의 경우는 계속 호출이 되고 있습니다.

왜 그럴까요? 더 자세히 알아보겠습니다.

 

첫번째 useEffect는 count1 state를 사용합니다.

따라서 count1 state를 의존성 배열에 넣어 count1이 변경될 때마다 재호출 되었습니다.

이러한 경우 useEffect가 계속 재실행되기 때문에 성능상 문제가 생기게 됩니다.

이럴 때 count1 state가 아니라 prevState를 사용할 수 있습니다.

아래와 같이 수정할 수 있습니다.

 

두번째 useEffect는 prevState를 사용하니 count2 state를 의존성 배열에 넣을 필요가 없습니다.

setState 사용 시 아래와 같이 사용하면 이전 state를 사용할 수 있기 때문입니다.

위와 같이 사용하면 이전 state를 사용할 수 있습니다.

즉 count2를 직접 사용하지 않아도 이전 count2가 prevState에 들어있기 때문입니다.

그럼 의존성 배열에 아무것도 넣을 필요가 없으니 성능이 개선됩니다.

따라서 setState 시 이전 state의 값이 필요한 경우 prevState를 사용하는 것이 좋습니다.

(+ 100%는 아니니 상황에 맞게 사용)

 

◆ 1씩 증가하는 timer 만들기 (2)

코드 보러가기 : 링크

이번에는 다른 방법으로 useEffect를 사용해보겠습니다.

state를 사용하지 않고 1씩 증가하는 timer를 구현할 수 있습니다.

아래 코드를 확인해보세요.

코드가 이해 되시나요?

화면에 보여질 필요는 없지만 값은 가지고 있어야 할 때 위 방법을 사용하셔도 됩니다.

useRef와 useEffect로 간단하게 구현할 수 있습니다.

코드 이해는 어렵지 않으니 한번 스스로 하시길 바랍니다.

(+ 정답이 있으니 ...)

 

◆ 정리 및 다음 게시글 소개

이번 게시글에서는 useEffect hook을 실습해보았습니다.

다음 게시글에서는 useMemo, useCallback에 대해 알아보도록 하겠습니다.

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.