react - custom hook 사용하기

// CommentList.js
class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      comments: DataSource.getComments()
    };
  }

  componentDidMount() {
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange() {
    this.setState({
      comments: DataSource.getComments()
    });
  }

  render() {
    return (
      <div>
        {this.state.comments.map((comment) => (
          <Comment comment={comment} key={comment.id} />
        ))}
      </div>
    );
  }
}

// BlogPost.js
class BlogPost extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      blogPost: DataSource.getBlogPost(props.id)
    };
  }

  componentDidMount() {
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange() {
    this.setState({
      blogPost: DataSource.getBlogPost(this.props.id)
    });
  }

  render() {
    return <TextBlock text={this.state.blogPost} />;
  }
}

// SubscribeData.js
function useSubscribeData({ fetchData, id }) {
  const [data, setData] = React.useState(null);

  const handleChange = React.useCallback(() => {
    setData(fetchData(id));
  }, [fetchData, id])

  React.useEffect(() => {
    DataSource.addChangeListener(handleChange);

    return () => {
      DataSource.removeChangeListener(handleChange);
    }
  }, [handleChange])

  React.useEffect(() => {
    setData(fetchData(id));
  }, [fetchData, id])

  return data;
}

useSubscribeData.defaultProps = {
  id: '',
}

// CommentList.js
const CommentList = () => {
  const fetchData = React.useCallback(() => {
    return DataSource.getComments();
  }, []);

  const comments = useSubscribeData({
    fetchData: fetchData
  });

  return (
    <div>
      {comments.map(comment => (
        <div comment={comment} key={comment.id} />
      ))}
    </div>
  );
};

// BlogList.js
const BlogList = ({ id }) => {
  const fetchData = React.useCallback(() => {
    return DataSource.getBlogPost(id);
  }, [id]);

  const post = useSubscribeData({
    fetchData: fetchData,
    id: id
  });

  return <div>this is post!!</div>;
};