📝 React를 사용하는 데 있어 꼭 알아야할 개념인 라이프사이클에 대해서 설명해보려고 합니다!
: Component의 Lifecycle 중간 중간에 간섭하여 코드를 실행할 수 있는데, 이것이 바로 Lifecycle hook이라고 한다.
예시)
: Lifecycle hook 중 가장 대표적인 useEffect
에 대해서 알아보자
useEffect
는 컴포넌트가 mount / update가 되었을 때 특정 코드를 실행할 수 있다.
useEffect( () => {
실행할 코드
}, [실행조건]);
useEffect 안에 있는 코드는 html 렌더링 후에 동작한다!
따라서 오래 걸리는 어려운 작업
(ex. 어려운 연산, 서버에서 데이터 가져오기, 타이머...)을
useEffect 안에 넣으면 html을 먼저 보여주고 실행하여 효율적이다
: Side Effect(= 함수의 핵심 기능과 상관 없는 부가기능)이라는 단어에서 따옴
useEffect( () => {
실행할 코드
});
👆 실행조건이 없을 때는 mount / update 시 실행됨 → 비효율적
useEffect( () => {
실행할 코드
}, [count]);
👆 실행조건이 있을 때는 mount시, count라는 state가 변할 때만 실행됨
useEffect( () => {
실행할 코드
}, []);
👆 실행조건이 [ ]이면 mount에만 실행됨
: useEffect 안의 코드 실행 전에 실행된다!
컴포넌트 mount시 실행되지 않고, unmount시 실행됨
useEffect( () => {
return () => { 실행할 코드(= clean up function) }
}, []);
ex. 타이머를 제거하는 함수(clearTimeout()
)를 넣어 무한 생성되는 타이머를 방지할 수 있음 (효율적)
서버에서 데이터를 요청할 때 재렌더링이 걸리면 겹쳐서 버그가 일어날 수 있으므로, return문 안에 기존 데이터 요청은 제거해 달라는 코드를 넣기
: 코딩애플 강의