IT/React
[React] "리액트를 다루는 기술" 13.6 리액트 라우터 부가 기능 (함수형 컴포넌트로 변경해보기)
무녈
2021. 9. 19. 16:18
[리액트를 다루는 기술] 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;
함수형 컴포넌트로 변경할 경우 위의 클래스형 컴포넌트와 비교하였을 때 동일하게 기능이 작동하는 것을 확인할 수 있었습니다.
(함수형 컴포넌트 변경 내용은 생략~)
반응형