React Lifecycle이란?
우리말로 생애주기. 리액트에서 생애주기가 무엇인지 알아보자.
생애주기
일반적인 시간에 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정
1. React 컴포넌트의 생애 주기(생명 주기)
1. Mount
-컴포넌트가 화면에 나타나는 것.
2. Update
-sate가 바뀌거나, 부모 컴포넌트가 리렌더 되거나, props가 바뀌어 자기 자신이 리랜더 되는 과정에서 컴포넌트가 변화하는 순간.
3. UnMount
-컴포넌트가 화면에서 사라짐.
2. 컴포넌트 라이프사이클을 제어하는 것
컴포넌트가 탄생하고, 변화하고, 사라지는 순간에 각각 어떤 작업을 수행 시킬수 있다는 것을 라이프사이클을 제어/이용한다고 할 수 있다.
ex)탄생 시 초기화 작업, 변화시에는 해당 변화를 통해 발생할 수 있는 예외에 대한 처리 작업을 수행, 컴포넌트가 사라지게 될 때 해당 컴포넌트가 사용하던 메모리를 반환하게 하는 작업 등
리액트를 포함해 소프트웨어를 더 견고하고 효율적으로 개발하기 위해서는 자신이 이용하는 기술의 라이프사이클을 온전히 이해하고 이용할 수 있어야 한다.
3. React Component Lufecycle Methods
리액트는 기본적으로 라이프사이클 마다 실행할 수 있는 메소드들을 가지고 있다.
-
ComponentDidMount
-컴포넌트가 마운트 되는 순간에 실행할 수 있는 함수 -
ComponentDidUpdate
-컴포넌트가 변화하는 순간에 이용할 수 있는 메소드 -
ComponentWillUnmount
-컴포넌트가 사라지기 전 실행할 수 잇는 메소드
위 메소드들은 오직 클래스형 컴포넌트에서만 사용 가능하다.
원래 state 역시 클래스형 컴포넌트에서만 사용 가능하다.
앞에 use를 붙여 useState, useEffect, useRef로 클래스형 컴포넌트가 근본적으로 가지고 있는 기능을 함수형 컴포넌트에서 낚아채서(Hooks)사용할 수 있는 기능을 React Hooks으로 사용할 수 있게 됐다.
React Hooks는 리액트의 라이프사이클을 제어할 수 있는 기능들을 훔쳐올 수 있는 기능이다.
4. 그럼 왜 굳이 모든 기능이 있는 클래스형을 냅두고 함수형 컴포넌트를 쓸까?
클래스형 컴포넌트에는 고질적인 문제가 있다.
같은 기능을 제작하더라도 함수형 컴포넌트보다 더 긴 코드를 작성해야 하고 복잡하다.
치명적은 단점은 중복 코드를 굉장히 많이 써야 한다는 것이다.
5. useEffect
리액트 함수형 컴포넌트에서 라이프사이클을 제어하기 위해서는 useEffect Hooks을 이용해야 한다.
useEffect(()=>{
// todo... Callback 함수
}, []) // Dependency Array(의존성 배열)useEffect는 두개의 파라미터를 전달한다.
첫번째 파라미터는 콜백함수, 두번째 파라미터는 의존성 배열을 전달한다.
의존성 배열(뎁스, Dependency Array)중에 하나라도 변화하면 첫번째 파라미터인 콜백함수가 다시 수행된다.
뎁스에 자꾸 변화하는 값을 넣는다면, 변할때마다 콜백함수가 실행된다.
useEffect를 이용하면 컴포넌트 마운트, 업데이트, 언마운트 또는 어떤 특정값의 변화를 추적할 수 있는 라이프사이클 제어를 활용할 수 있다.
++ 더 쉬운 다른 설명으로 추가
useEffect(()=>{
// 여기에 쓴 코드는 컴포넌트가 mount, update 될 때 실행이 된다.
})useEffect는 html이 모두 렌더링 된 이후에 실행된다.
for(let i=0; i>10000; i++){
console.log(1);
}위와 같이 오래 걸리는 반복문이 html이 렌더링 되기 전에 실행된다면 사용자는 화면을 보기까지 오래 걸린다.
useEffect(()=>{
for(let i=0; i>10000; i++){
console.log(1);
}
})useEffect 안에 넣어준다면 html이 다 렌더링 된 다음 반복문을 실행한다. 조금 더 효율적으로 동작하게 해준다.
useEffect를 사용하는 경우
1. 어려운 연산
2. 서버에서 데이터를 가져오는 작업 같은 경우
3. 타이머를 쓸 때
이름이 useEffect인 이유
함수의 핵심기능과 상관없는 부가기능을 Side Effect라고 한다.
여기에서 이름을 따와 만들었다고 한다.
Side Effect 코드 보관함
의존성 배열에 state를 넣으면 해당 state가 변경될 때만 useEffect가 실행된다.
컴포넌트가 mount 됐을 때 딱 한번만 useEffect를 실행시키고 싶다면 의존성 배열을 비워놓으면 된다.
정리.
useEffect(()=>{ }) // 1. 재렌더링마다 코드를 실행시켜준다.
useEffect(()=>{ }, []) // 2. mount 됐을 때 1회 코드를 실행시켜준다.
useEffect(()=>{ }, [state]) // 3. state가 변경될 때마다 실행시켜준다.
useeffect(()=>{
return ()=>{
코드~~
}
}) // 4. useeffect 안의 코드 실행 전에 항상 실행시켜준다.
useeffect(()=>{
return ()=>{
코드~~
}
}, []) // 5. 컴포넌트 unmount시 1회 실행시켜준다.