9.7.4 리팩토링하기

여기까지 구현하고 나니 FeedScreen에서 사용한 코드와 Profile에서 사용한 코드가 굉장히 유사하죠? 코드를 재사용할 수 있도록 리팩토링해봅시다.

아예 해당 로직을 usePosts에 구현할 수도 있고, usePostsEventEffect라는 Hook을 또 만들어서 해당 Hook을 usePosts에서 사용하는 형태로 구현할 수도 있습니다.

우리는 usePostsEventEffect Hook을 만드는 방식으로 구현하겠습니다. 우선 이번에 FeedScreen과 Profile에서 작성한 useEffect를 모두 지워주세요.

해당 Hook을 다음과 같이 작성해주세요.

hooks/usePostsEventEffect.js

import {useEffect} from 'react';
import events from '../lib/events';

export default function usePostsEventEffect({refresh, removePost, enabled}) {
  useEffect(() => {
    if (!enabled) {
        return;
    }
    events.addListener('refresh', refresh);
    events.addListener('removePost', removePost);
    return () => {
      events.removeListener('refresh', refresh);
      events.removeListener('removePost', removePost);
    };
  }, [refresh, removePost, enabled]);
}