시계 만드는 법~ React HP~
5989 단어 React
그 중에서 주요 개념으로'state와 생명주기'라는 페이지에 시계를 만들었지만 보든 쓰든 잘 모르겠기 때문에 등장한 코드를 정리해 봤다.
완성형
메인 페이지에 적힌 다음 코드는 이런 느낌의 실시간 시간 표시 시계를 만들 수 있다
class Clock extends React.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, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
알 수 없는 일
상술한 코드에서는 잘 모르겠지만, 나는 아래의 내용을 조사해 보았다
toLocaleTimeString
날짜 대상 방법 중 하나
※ 진행 일자와 시간의 획득 및 설정 대상
toLocalTimeString은 지역 정보에 따라 문자열로 시간 부분을 얻는 방법입니다.
마찬가지로 문자열 변환 방법을 어떻게 총결합합니까
형식
함의
toDateString
문자열을 사용하여 날짜 섹션 읽어들이기
toTimeString
문자열로 시간 섹션 가져오기
toLocaleDateString
지역 정보에 따라 문자열 형식으로 날짜 섹션 가져오기
toLocaleTimeString
지역 정보에 따라 문자열을 통해 시간 섹션 얻기
toString
문자열로 날짜 읽어들이기
componentDidMount 및 componentWillUnmount
라이프 사이클 방법 중 하나입니다.
라이프 사이클 방법
코드를 많이 썼는데 실행 순서도 있는 것 같아요.
생명주기 방법은 처리 과정의 특정 시간에 코드를 실행하는 방법을 가리킨다.
이 처리 과정과 방법의 관계는 ↓의 그림인 것 같다.
이 관계를 보면 지금까지 잘 알지 못했던contructor와render의 뜻을 이해할 수 있다
conponentDidMount
Component가 Mount에 의해 수행되는 방법은 다음과 같습니다.
・ Ajax를 사용하여 데이터 읽기 (초)
· DOM 처리(초)
/타이머 설정
일련의 목록
이번 코드는 타이머를 설치했다.
설정하면 componentWillUnmount () 로 해제하는 것을 잊지 마십시오.
componentWillUnmount
component는 Unmount 시 실행됩니다. 주요 용도는 다음과 같습니다.
타이머 해제
목록 목록 취소
비동기식 처리 중단
setInterval
일정 시간이 지난 후에 처리하는 방법입니다.
쓰기 방법 setInterval(関数,処理間隔)
이곳의 처리 간격 단위는 밀리초이다.
이번 코드에서는 1초에 한 번 ()=>this.tick()
실행하는 것을 알 수 있다.
즉,
같은 시간에 끊임없이 업데이트되고 있습니다.
덕분에
clearInterval
setInterval()에 설정된 타이머 해제 방법입니다.
쓰기 방법 clearInterval(止めたいタイマーID)
참고 자료
React HP
JavaScript 시작 강좌
React Component 라이프 사이클
[JavaScript 입문] setInterval의 사용 방법 요약
Reference
이 문제에 관하여(시계 만드는 법~ React HP~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ShunichiroAbe/items/5331e22966c72581eda2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
class Clock extends React.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, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);
상술한 코드에서는 잘 모르겠지만, 나는 아래의 내용을 조사해 보았다
toLocaleTimeString
날짜 대상 방법 중 하나
※ 진행 일자와 시간의 획득 및 설정 대상
toLocalTimeString은 지역 정보에 따라 문자열로 시간 부분을 얻는 방법입니다.
마찬가지로 문자열 변환 방법을 어떻게 총결합합니까
형식
함의
toDateString
문자열을 사용하여 날짜 섹션 읽어들이기
toTimeString
문자열로 시간 섹션 가져오기
toLocaleDateString
지역 정보에 따라 문자열 형식으로 날짜 섹션 가져오기
toLocaleTimeString
지역 정보에 따라 문자열을 통해 시간 섹션 얻기
toString
문자열로 날짜 읽어들이기
componentDidMount 및 componentWillUnmount
라이프 사이클 방법 중 하나입니다.
라이프 사이클 방법
코드를 많이 썼는데 실행 순서도 있는 것 같아요.
생명주기 방법은 처리 과정의 특정 시간에 코드를 실행하는 방법을 가리킨다.
이 처리 과정과 방법의 관계는 ↓의 그림인 것 같다.
이 관계를 보면 지금까지 잘 알지 못했던contructor와render의 뜻을 이해할 수 있다
conponentDidMount
Component가 Mount에 의해 수행되는 방법은 다음과 같습니다.
・ Ajax를 사용하여 데이터 읽기 (초)
· DOM 처리(초)
/타이머 설정
일련의 목록
이번 코드는 타이머를 설치했다.
설정하면 componentWillUnmount () 로 해제하는 것을 잊지 마십시오.
componentWillUnmount
component는 Unmount 시 실행됩니다. 주요 용도는 다음과 같습니다.
타이머 해제
목록 목록 취소
비동기식 처리 중단
setInterval
일정 시간이 지난 후에 처리하는 방법입니다.
쓰기 방법
setInterval(関数,処理間隔)
이곳의 처리 간격 단위는 밀리초이다.이번 코드에서는 1초에 한 번
()=>this.tick()
실행하는 것을 알 수 있다.즉,
같은 시간에 끊임없이 업데이트되고 있습니다.
덕분에
clearInterval
setInterval()에 설정된 타이머 해제 방법입니다.
쓰기 방법
clearInterval(止めたいタイマーID)
참고 자료
React HP
JavaScript 시작 강좌
React Component 라이프 사이클
[JavaScript 입문] setInterval의 사용 방법 요약
Reference
이 문제에 관하여(시계 만드는 법~ React HP~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ShunichiroAbe/items/5331e22966c72581eda2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(시계 만드는 법~ React HP~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ShunichiroAbe/items/5331e22966c72581eda2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)