React | Hooks로 Life Cycle API 구현하기

Hooks는 함수 컴포넌트에서도 클래스 컴포넌트처럼 state를 다룰 수 있고 여러 기능을 사용할 수 있게 해줍니다.
(this를 바인딩 하지 않아도 돼서 매우 편리하게 사용 중)

 

 리액트에서 기본으로 제공하는 Hooks는 useState, useEffect, useCallback 등이 있으며, 그중에서 Life Cycle API와 관련된 Hooks는 useEffect입니다. 즉 useEffect로 componentDidMount, componentDidUpdate 등의 처리를 할 수 있습니다. 해당 컴포넌트에서 구독이나 비동기 네트워킹 등의 동작은 useEffect를 이용해서 데이터를 받아오면 됩니다.

 

 

+) 사용 예시

 

useEffect를 이용해 컴포넌트가 생성될 때 비동기 통신을 통해 값을 받아와 컴포넌트에 출력합니다.

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

function Room ({ room }) {
    const [notification, setNotification] = useState(0);
    const [users] = useState(JSON.parse(localStorage.getItem('users')));
    const { chat_room_id, partner_profile_img, partner_name } = room;

    useEffect(()=>{
        fetch(`http://localhost:3002/chat/notification?chat_room_id=${chat_room_id}&id=${users.id}`)
        .then(res => res.json())
        .then(data => {
            setNotification(data.notification);
        })
    },[users.id, chat_room_id]);

    return (
     <div className='room-list-room'>
        <div>
          <img className='room-list-profile-img' 
          alt='profile_img' 
          src={`/uploads/${partner_profile_img}`} 
          />
          {notification>0?<span className='room-list-notification'>{notification}</span>:null}
        </div>

      <span className='room-list-partner-name'>{partner_name}</span>
    </div>
    )
}

export default Room;

 

useEffect로 당연히 componentWillUnmount도 구현할 수 있습니다.

(componentWillUnmount는 해당 컴포넌트가 화면상에서 사라질 때 실행됩니다.)

useEffect(() => {
  return () => {
    console.log('will unmount');
  }
}, []);

 

 

+) 사용 예시

해당 컴포넌트가 언마운트 될 때 leaveChatroom이라는 함수가 실행되도록 했습니다.

useEffect(() => {
  return () => {
  	leaveChatroom({chat_room_id: chat_room_id.id})
  }
}, [leaveChatroom, chat_room_id.id]);

 

 

! useEffect 한 번만 실행되도록 하기

useEffect를 처음 사용할 때 가장 애를 먹는 부분 중 하나가 바로 useEffect의 무한반복입니다. 해결방법은 매우 간단합니다. 빈 배열을 두 번째 인수로 넘겨주기만 하면 끝!

useEffect(() => {
  // useEffect로 실행될 부분
}, []); 

Hooks FAQ – React

 

 

 

 

+) 참고

Hook의 개요 – React

Replace lifecycle with hooks in React