[React] 13. 리액트 컴포넌트의 Lifecycle과 useEffect

이전 글 ▼

0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅

1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX

2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object)

2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용)

3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component)

4. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 4. 동적인 UI 제작하기

5. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 5. 반복되는 부분 축약하기 (map)

6. 2023.05.29 - [🌌 | WEB DEV/React] - [React] 6. props

7. 2023.07.03 - [🌌 | WEB DEV/React] - [React] 7. 이미지 삽입하기(css, html, public폴더에서 가져오기)

8. 2023.07.06 - [🌌 | WEB DEV/React] - [React] 8. 다른 파일에서 데이터 가져오기

9. 2023.07.09 - [🌌 | WEB DEV/React] - [React] 9. 라우팅-1 (react-router-dom세팅, Routes, Route, Link)

10. 2023.07.10 - [🌌 | WEB DEV/React] - [React] 라우팅-2 (useNavigate, 404page, Nested Routes, Outlet)

11. 2023.10.03 - [🌌 | WEB DEV/React] - [React] 11. 라우팅-3 양산형 라우팅

12. 2023.10.04 - [🌌 | WEB DEV/React] - [React] 12. Styled-components (+ 한 컴포넌트에 css파일 적용법)

 

리액트 컴포넌트의 Lifecycle에 대해서 알아보자!

 

1. 컴포넌트의 Lifecycle

 

컴포넌트는 페이지 내에서 아래의 생명주기를 가진다.

 

1) mount (생성)
2) update (재렌더링)
3) unmount (삭제)

 

 

위의 주기에 개발자는 간섭을 할 수 있다.

즉, 컴포넌트의 상태 중간중간에 코드를 실행할 수 있다. (e.g. 컴포넌트 생성 시 특정 코드 실행 등)

 

 

 

---

 

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

특정 컴포넌트가 생성될 때 or 업데이트되고나서 or 사라지기 전에 코드를 실행하라!

라고 간섭을 할 수 있는데

이러한 간섭은 hook을 달아서 수행한다. (Lifecycle hook)

 

1) 이전의 방식

Lifecycle hook을 예전에는 class 문법과 함께

componentDidMount(), componentDidUpdate(), componentWillUnmount() 를 이용하여 수행하였다.

 

class Page extends React.Component {
  componentDidMount(){
    //mount 시
  }
  componentDidUpdate(){
    //update 시
  }
  componentWillUnmount(){
    //unmount 전
  }
  ...
}

 

2) 최근의 방식

최근에는 useEffect 훅을 이용해 기능을 구현한다.

import {useState, useEffect} from 'react';

function Pages(){
  useEffect(()=>{
    //mount, update 시 코드 실행
  })
  ...
  
  return(
    ...
  ) 
}

 

 

예시 (mount 시)

import {useState, useEffect} from 'react';

function Pages(){
  useEffect(()=>{
    console.log("HELLO!");
  })
  
  return(
    ...
  ) 
}

 

이처럼 컴포넌트가 로드될 때 내부의 코드를 실행하는 것을 알 수 있다. (위의 예시는 페이지 컴포넌트)

 

※ useEffect 내부 코드가 2번 실행되는 이유

위의 예시에서도 확인되듯 useEffect 내부의 코드는 기본적으로 2회 실행이 된다.
이는 react가 자체적으로 개발 시 디버깅을 위해 사전설정한 것이다. (StrictMode)
따라서 배포를 위한 빌드 파일에서는 정상적으로 1회 실행한다.

이를 개발환경에서도 동일하게 1회 실행하고 싶다면
index.js에서 <React.StrictMode> 태그를 삭제하면 된다.

 

 

예시 2 update 시(재렌더링)

import {useState, useEffect} from 'react';

function Pages(){
  useEffect(()=>{
    console.log("HELLO!");
  })
  
  let [count, setCount] = useState(0);
  
  return(
    ...
    <button onClick={()=>{setCount(count+1)}} />
  ) 
}

 

버튼을 눌러 재렌더링이 될 때 useEffect 내부의 코드가 재 실행되는 것을 확인할 수 있다.

 

 

---

3. useEffect를 사용하는 경우

 

1) useEffect의 동작원리

useEffect 내부의 코드는 html이 모두 렌더링이 된 후 실행이 된다.

 

위에서 보았던 예시를 다시 보면,

 

예시_ useEffect 내부에 있는 경우

import {useState, useEffect} from 'react';

function Pages(){
  useEffect(()=>{
    console.log("HELLO!");
  })
  
  return(
    ...
  ) 
}

 

예시_ 아닌 경우

import {useState, useEffect} from 'react';

function Pages(){
  console.log("HELLO!");
  
  return(
    ...
  ) 
}

 

위의 코드들은 같은 기능을 한다.

 

하지만 언급한대로

복잡한 연산이나 시간이 오래 걸리는 코드들은 useEffect 내부에 위치시킨다면 (e.g. 타이머, 서버에서 데이터 get)

html 렌더링이 된 이후에 동작하므로

사용자 입장에서 조금 더 빠르게 동작하는 웹사이트를 제공할 수 있다.

 

2) 왜 Effect 일까?

프로그래밍 용어 중 SideEffect 라는 것이 있다.

이는 함수의 기능과 관련이 없는 부가기능을 의미한다.

 

useEffect는 해당 용어에서 따온 용어라고 한다!