[React-복습] 4. State와 Component
State와 Component에 대한 스케치 포스팅이다.
01. State와 Component
01-1. FunctionalComponent 와 ClassComponent
- FunctionalComponent.jsx / ClassComponent.jsx 참고
함수형 컴포넌트가 나온지 오래되었다. Hook 이 나오기 전에는 함수형 컴포넌트가 상태를 관리할 수가 없어서 state 관리가 필요한 컴포넌트는 클래스컴포넌트로 만들었고, 단순 props 는 함수형컴포넌트로 만들었다.
하지만, Hook 이 나오면서 함수형컴포넌트에서도 상태 관리가 가능해져서 요즘은 함수형컴포넌트로 많이 사용된다. Vue 라이플사이클 구조와 클래스컴포넌트가 비슷한 걸로 기억된다.
FunctionalComponent.jsx (함수형 컴포넌트)
import React, { useState, useEffect } from "react";
export default function FunctionalComponent() {
const [date, setDate] = useState(new Date());
const tick = () => {
setDate(new Date());
};
/**
* componentDidMount 역할
*/
useEffect(() => {
const interval = setInterval(() => tick(), 1000);
/**
* componentWillUnmount
*/
return () => {
clearInterval(interval);
};
}, []);
return (
<div>
<h1>Hello, It's FunctionalComponent!</h1>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
);
}
ClassComponent.jsx (클래스 컴포넌트)
import React, { Component } from "react";
export default class ClassComponent extends Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date(),
});
}
render() {
return (
<div>
<h1>Hello, ClassComponent!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
