React는 다중 렌더를 사용을 권장하지 않습니다 . 대신 상태가 변경되면 페이지가 다시 렌더링 되는 상태 저장 접근 방식을 사용합니다.
코드를 입import React from 'react';
import ReactDOM from 'react-dom';
function showTime()
{
const myElement = (
<div>
<h1>Welcome to yongin-si!</h1>
<h2>{new Date().toLocaleTimeString()}</h2>
</div>
);
ReactDOM.render(
myElement,
document.getElementById("root")
);
}
setInterval(showTime, 1000)력하세요위에 코드 구성 요소는 사실 잘 보면 아무런 구성요소가 없습니다 .
최신 시간을 포함하기 위해 "myElement"라는 중첩 JSX 요소를 할당하고 매초 동일하게 렌더링을 합니다. 이는 React 를 사용하여 구현하는 최악의 방법중 하나 입니다. 이제 클래스 구성요소가 필요한 상태 및 수명주기 메서드를 사용하여 구현을 시작할 것입니다 .
먼저 구성요소를 먼저 생성해 보겠습니다 .
React 프로젝트 디렉터리를 켜고 src 폴더에서 index.js 파일을 켭니다 .
import React from 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component{
}클래스를 "Clock"으로 정의했으므로 이제 프로세스를 먼저 생각해야 합니다.
"Props"는 거의 변경되지 않는 속성 집합이고 "State"는 시간이 지남에 따라 변경되어야 하는 관찰 가능한 속성 집합입니다. 이제 우리 자신의 상황을 생각해보면 시계는 정확히 두 부분으로 구성되어 있습니다. 첫 번째는 "Welcome to yongin-si"에 오신걸 환영합니다 : 라는 제목입니다 . 이것은 평생 동안 변경되지 않을 것이기 때문에 props 를 사용하여 구현해야 합니다. 다른 부분은 매초마다 변경되어야 하는 시간자체 입니다. 생성자와 렌더 메서드를 사용하여 정기적으로 업데이트하지 않고 제목과 시간을 표시하는 백본 메서드를 먼저 생성해보겠습니다.
import React From 'react';
import ReactDOM from 'react-dom';
class Clock extends React.Component{
constructor(props)
{
super(props);
this.state = {time : new Date()};
}
render()
{
return(
<div><hi>welcome to {this.props.title}!</hi>
<h2>{this.state.time}</h2></div>
);
}
}
ReactDOM.render(
<Clock title="yongin-si"/>
document.getElementById('root'));
이제 자체 구성요소인 Clock 을 만들고 필요한 것을 렌더링 했으므로 매초 시간을 업데이트 하는 방법만 알아내면 됩니다. 이제 매 초마다 상태를 업데이트 하는 간격을 설정해야 하며 이는 클럭 구성 요소가 마운트 되는 즉시 수행되어야 합니다. 따라서 상태를 업데이트 하는 간격을 설정하고 앱을 효율적으로 만들수 있습니다.
