안녕하세요. @u robotics 입니다.
리액트는 매우 손쉽게? 개발을 할 수 있게 돕는 도구입니다.
자바스크립트 라이브러리죠.
리액트로 개발을 하면,
리액트 돔은 웹 개발을 도와주고요.
리액트 네이티브는 IOS 및 안드로이드 앱 개발을 도와줍니다.
리액트는 거의 개발표준 정도로 올라온 기술이라서
이것만 배워도 그냥 웹 개발자가 될 수 있는 기술이에요.
ㅇ_ㅇ 대박이죠.
이것만 알면 당신도 웹 개발자. !!! 두둥.
(쪼금만 더 배우면 앱 개발자도 됨!!! 두두둥)
그래서 리액트로 웹 개발하는 걸
총 10회 정도 써볼려고 합니다.
저도 리액트 공부를 하고,
관심있는 분들도 리액트 배우고 하는
좋은 의미로 시작해봐요. ㅎㅎㅎ
지난 1강 에서는
리액트로 간단하게
웹을 띄우는 것까지 해봤습니다.
https://steemit.com/kr/@urobotics/react-1st
이번 2차에서는스톱워치를 만들려고 합니다.
역시 create-react-app을 활용합니다.
기본요구 사양은 있어요.
(1) nodejs 설치하기.
(2) Atom 같은 텍스트 에디터 설치하기.
(Visual Studio Code나 Sublime Text3, WebStorm 다 괜찮습니다.
편한 걸로 쓰세요.)
자, 그럼 시작해봅시다.
명령프롬프트를 찾아서 열어주세요.
윈도우 왼쪽하단 검색에서 열어서 명령 프롬프트 검색.
(아니면, windows키 + r )
{맥은 터미널 여시면 됩니다.}
창이 열리면 cmd를 쳐주세요.
그러면 명령프롬프트가 열립니다.
여기서부터 명령어를 입력하면 됩니다.
역시, 딱 3줄만 입력하면 되는데요.
이번에는 이름을 좀 바꿔봅시다.
stopwatch 로요.
그러면 이렇게 됩니다.
create-react-app stopwatch
cd stopwatch
npm start
이렇게 한줄씩 차례로 입력하고
엔터치고.
3번다 입력해주세요.
그러면 또 웹이 뜹니다.
이번에는 조금 수정해보겠습니다. ^^
소스를 다 보시면 아시겠지만,
가장 중요한 파일은 index.js 입니다.
그걸 수정하면 돼요.
index.js에서 stopwatch.js 를 쓰겠다고 하고
그걸 stopwatch.js에 만들어주면 됩니다.
결국 할 일은
(1) index.js 수정.
(2) stopwatch.js 만들기
이렇게 됩니다.
해보죠. ㅎㅎㅎ ^^
일단 index.js 파일을 찾아서 수정해야죠.
src 폴더 안에 있습니다.
파일을 보시면
3번째 줄을 import StopWatch from './StopWatch' 로 써주시고요.
6번째 줄의 App을 StopWatch로 바꿔주시면 됩니다.
그리고 src 폴더 밑에
StopWatch.js 파일을 하나 만들어줍니다.
이 파일 복사해서 붙여넣으시면 됩니다.
import React, {Component} from 'react'
class StopWatch extends Component{
constructor(props){
super(props)
this.state={
isLive:false,
curTime:0,
startTime:0
}
this.timerId = 0
}
//마운트 했을 때
componentWillMount(){
this.timerId = setInterval(e=>{
this.tick()
}, 1000)
}
//언마운트 했을 때
componentWillUnmount(){
clearInterval(this.timerId)
}
//매초 실행됩니다.
tick(){
if(this.state.isLive){
const v = new Date().getTime()
this.setState({curTime:v})
}
}
//시작/중지 버튼을 클릭했을 때
clickHandler(e){
//중지할 때
if(this.state.isLive){
this.setState({isLive:false})
return
}
//시작할 때
const v = new Date().getTime()
this.setState({
curTime:v,
startTime:v,
isLive:true
})
};
//출력할 시계를 생성합니다.
getDisp(){
const s = this.state
const delta = s.curTime - s.startTime
const t = Math.floor(delta / 1000)
const ss = t % 60
const m = Math.floor(t/60)
const mm = m % 60
const hh = Math.floor(mm / 60)
const z = (num) => {
const s = '00' + String(num)
return s.substr(s.length -2, 2)
}
return
{z(hh)}:{z(mm)}:{z(ss)}
}
//화면에 보여주기(rendering)
render(){
let label = 'START'
if(this.state.isLive){
label = 'STOP'
}
const disp = this.getDisp()
const fclick = (e) => this.clickHandler(e)
return (
export default StopWatch
그래서 마지막으로
커맨드 창[명령프롬프트] 으로 돌아가서요.
create-react-app stopwatch
cd stopwatch
npm start
해주시면 이런 화면이 뜹니다.
START를 눌러주시면 진행됩니다.
STOP 눌러서 꺼주시면
재시작이 됩니다.
여기까지 읽어주셔서 감사합니다.
감사합니다. ^^ 좋은 하루 되세요.
태풍 콩레이 그리고 부안 ‘내소사’ 둘째 날 그 비와 바람을 가르고 ‘내소사’를 다녀왔습니다....
