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 안에다가 기존에 데이터를 요청하던 코드를 제거하는 로직을 적어두면 좋습니다.
'JS > React' 카테고리의 다른 글
React - ajax 활용하기 (0) | 2024.03.06 |
---|---|
React - StrictMode (0) | 2024.03.06 |
React - Styled-components (0) | 2024.03.06 |
React - Router (3) | 2024.03.06 |
React - import & export (1) | 2024.03.04 |