TIL # 36 (React intro 3)
4. React 컴포넌트의 Lifecycle
컴포넌트의 life cycle에 대해 알아보자. 컴포넌트를 만들 때 class로 생성하면 아래의 메서드를 사용할 수 있고, 컴포넌트가 lifecycle에 따라 각자의 메서드가 호출된다.
1초에 한 번 tick함수를 호출해서 현재시간을 초 단위로 업데이트 해보자.
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementByID('root')
);
}
setInterval(tick, 1000);
화면으로 보여줄 부분을 함수를 사용해서 컴포넌트로 만들기
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {props.date.toLocaleTimeString()}.</h2>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
);
}
setInterval(tick, 1000);
매초 업데이트될 기능이 Clock 컴포넌트 내에서 이루어져야 하므로 class 컴포넌트를 만들기
class Clock extends React.Component {
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.props.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
- ReactDOM.render() 에서 첫 인자로 를 넘길 때, React는 Clock 컴포넌트의 constructor를 호출한다.
- Clock에서 초기 시간이 필요하므로 this.state에 현재 시간으로 초기화했다.
- 그리고나서 Clock 컴포넌트의 render() 메서드가 호출된다.
- DOM에 render()의 return된 요소가 추가 되면 componentDidMount함수가 호출된다.
- Clock 컴포넌트의 tick 메서드가 매 초 호출될 수 있도록 timer를 추가한다.
- 매 초 브라우저가 tick 메서드를 호출하면서 this.state.date 값이 변한다.
- state가 변경되면 원래 componentDidUpdate 함수가 호출되지만, 우리는 위에서 정의하지 않았으므로 render()가 다시 호출되면서 바뀐 부분이 변경된다.
- DOM에서 Clock 컴포넌트가 삭제될 때, componentWillUnmount 가 호출되고 timer도 같이 멈추게 된다.
class Clock extends React.Component {
constructor() {
super();
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, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
Author And Source
이 문제에 관하여(TIL # 36 (React intro 3)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@peng0code/TIL-36-React-intro-3저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)