[React] 함수형 컴포넌트의 생명주기(Life Cycle)

🌱 생명주기란?

리액트의 생명주기란 컴포넌트가 생성되어 사용되고 소멸되는 일련의 과정을 뜻합니다.

모든 리액트 컴포넌트에는 생명주기 이벤트가 발생합니다.

이 이벤트를 기반으로 컴포넌트가 수행할 동작과 실행 시점을 제어하고 정의할 수 있습니다.

 

생명주기 이벤트에는 3가지 종류가 존재합니다.

• 생성(mounting) 이벤트: 리액트 요소가 처음으로 돔에 추가될 때 발생
• 갱신(updateing) 이벤트: 속성이나 상태가 변경되어 리액트 요소가 갱신될 때 발생
• 제거(unmounting) 이벤트: 리액트 요소가 돔에서 제거될 때 발생

함수형 컴포넌트에서 이벤트를 발생시키기 위해 주로 사용하는 훅은 'useState'와 'useEffect'입니다.

아래에서 아이템을 추가할 수 있는 쇼핑 리스트 애플리케이션을 예시로 각 이벤트를 살펴보겠습니다.

 

---

🌱 생성 이벤트(Mounting Event)

리액트의 컴포넌트가 만들어지는 때를 '생성'이라고 하며, 사용자는 새로운 컴포넌트를 화면에 보여달라고 요청합니다.

 

컴포넌트가 처음으로 화면에 렌더링될 때 useEffect 훅 안에 있는 코드가 실행됩니다.

import React, { useState, useEffect } from 'react';

function ShoppingList() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // 컴포넌트가 마운트된 후 데이터 불러오기
    const response = await fetch('/api/items');
    const data = await response.json();
    setItems(data);
  }, []);

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

 

---

🌱 갱신 이벤트(Updating Event)

화면에 보여지는 내용이 바뀌면 '갱신'이 일어납니다. 사용자가 새로운 정보를 넣어주면 컴포넌트는 해당 정보를 받아 화면을 업데이트합니다.

 

의존성 배열(dependency array)에 값을 넣으면 해당 값이 변경될 때마다 값이 들어있는 useEffect 훅 안의 코드가 실행됩니다.

import React, { useState, useEffect } from 'react';

function ShoppingList() {
  const [items, setItems] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    // 컴포넌트가 마운트된 후 데이터 불러오기
    const response = await fetch('/api/items');
    const data = await response.json();
    setItems(data);
  }, []);

  useEffect(() => {
    // 검색어(searchTerm)가 변경될 때마다 실행
    const response = await fetch(`/api/items?search=${searchTerm}`);
    const data = await response.json();
    setItems(data);
  }, [searchTerm]);	// 의존성 배열(dependency array)

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  }

  return (
    <div>
      <input type="text" onChange={handleSearch} />
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

 

---

🌱 제거 이벤트(Unmounting Event)

보여지던 컴포넌트가 필요 없어졌을 때, 화면에서 해당 컴포넌트를 '제거'합니다. 더 이상 컴포넌트를 사용하지 않겠다고 하면 그 컴포넌트는 화면에서 사라집니다.

 

useEffect 훅에서 클린업 함수를 반환하여 컴포넌트가 제거되기 전 실행할 작업을 지정합니다.

import React, { useState, useEffect } from 'react';

function ShoppingList() {
  const [items, setItems] = useState([]);
  
  useEffect(() => {
    // 컴포넌트가 마운트된 후 데이터 불러오기
    const response = await fetch('/api/items');
    const data = await response.json();
    setItems(data);

    // 컴포넌트가 언마운트될 때 클린업 함수를 실행
    return () => {
      // 타이머 정리 등
      clearInterval(this.timer);
    };
  }, []);

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

 

---

🌱  useEffect의 형태

useEffect는 컴포넌트 내에 어떤 변화가 생긴 이후에 호출되는 메서드입니다.

위의 예시에서 사용된 useEffect 훅의 형태에 대해 정리해보겠습니다.

 

1) 의존성 배열 안에 아무 값도 넣지 않으면 useEffect 훅은 렌더링 될 때 최초로 한 번만 실행됩니다.

useEffect(() => {
  ...
}, []);

2) 의존성 배열 안에 어떤 값을 넣으면 해당 값이 변경될 때마다 useEffect 훅이 실행됩니다.

useEffect(() => {
  ...
}, [값1, 값2, ...]);

3) useEffect 훅 안에 언마운트에 필요한 함수를 리턴하면 언마운트가 수행됩니다.

useEffect(() => {
  ...
  
  return () => {
    ...
  };
}, [값1, 값2, ...]);

 

---

읽어주셔서 감사합니다:)