[React] "리액트를 다루는 기술" 13.6 리액트 라우터 부가 기능 (함수형 컴포넌트로 변경해보기)

[리액트를 다루는 기술] 13장 "리액트 라우터로 SPA 개발하기" "13.6 리액트 라우터 부가 기능" 학습 중

"13.6.1 history" 관련 학습 내용에서 사용된 class component를 function component로 변경해보았습니다.

 

Class Component Code

import React, { Component } from "react";

class HistorySample extends Component {
  // 뒤로 가기
  handleGoBack = () => {
    this.props.history.goBack();
  };

  // 홈으로 이동
  handleGoHome = () => {
    this.props.history.push("/");
  };

  componentDidMount() {
    //이것을 설정하고 나면 페이지에 변화가 생기려고 할 떄마다 정말 나갈 것인지를 질문함
    this.unblock = this.props.history.block("정말 떠나실 건가요?");
  }

  componentWillUnmount() {
    // 컴포넌트가 언마운트되면 질문을 멈춤
    if (this.unblock) {
      this.unblock();
    }
  }
  render() {
    return (
      <div>
        <button onClick={this.handleGoBack}>뒤로</button>
        <button onClick={this.handleGoHome}>홈으로</button>
      </div>
    );
  }
}

export default HistorySample;

Function Component Code

import React, { useEffect } from "react";

const HistorySample = ({ history }) => {
  const handleGoBack = () => {
    history.goBack();
  };
  const handleGoHome = () => {
    history.push("/");
  };

  useEffect(() => {
    const unblock = history.block("정말 떠나실 건가요?");
    return () => unblock();
  });

  return (
    <div>
      <button onClick={handleGoBack}>뒤로</button>
      <button onClick={handleGoHome}>홈으로</button>
    </div>
  );
};

export default HistorySample;

함수형 컴포넌트로 변경할 경우 위의 클래스형 컴포넌트와 비교하였을 때 동일하게 기능이 작동하는 것을 확인할 수 있었습니다.

(함수형 컴포넌트 변경 내용은 생략~)