반응형
컴포넌트 만들기
컴포넌트 상태 관리하기
기초에서 배운 것은 상태를 가지지않는 stateless컴포넌트였음
우리는 그것에서 더 나아가 상태를 가지거나 외관상 크게 변화하는 컴포넌트의 경우 상태를 갖고 관리해야한다.
상태를 가지게 하려면 ? > 값을 기억해야함 state 객체 가 값을 기억한다.
state 특징 및 사용하기
state는 한번 값을 설정한 이후 값을 변경할때 setState()메서드를 사용해야 변경된다.
초기화하기
class <컴포넌트의 이름> extends React.Component {
constructor(props) {
this.state = {<초깃값>}
}
....
값 변경하기
this.setState({<이름> : <새로운값>})ex> 시계 컴포넌트 만들기
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<!--(1)-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
</html><body>
<div id = "root"></div>
<script type="text/babel">
class SClock extends React.Component {
constructor(props) {
super(props)
this.state ={
now:(new Date())
}
setInterval(e=>{
this.setState({now: (new Date())})
}, 1000)
}
render() {
const now = this.state.now
const hh = this.fmt(now.getHours())
const mm = this.fmt(now.getMinutes())
const ss = this.fmt(now.getSeconds())
return (<div>{hh}:{mm}:{ss}</div>)
}
fmt(v){
const s = "00" + v
return s.substr(s.length - 2 , 2)
}
}
const dom = <div><SClock /></div>
ReactDOM.render( dom,document.getElementById("root"))
</script>
</body>
state 상태를 매 시간마다 바꾼다. setstate()를 통해서
이벤드 구조와 구현
클릭이벤트
<div onClick={clickHandler}> Clicke Me </div>
//clickHandle 이거에 대한 이벤트 정의하면됨 클릭했을때 클래스 메서드 호출
클릭했을때 this를 바인드해야 인식 가능하다.
this.clickHandler = this.clickeHandler.bind(this)render 메서드에서 이벤트 정의
class <컴포넌트 이름> extends React.component {
render(){
const handeler = (e) => alert('hello')
return <button onClick={handler}>Click</button>
}
}반응형
'개발(라이브러리,프레임워크) > react.js & react native' 카테고리의 다른 글
| 리액트 네이티브 (오류해결) (0) | 2021.05.17 |
|---|---|
| 자동빌드, 웹팩 (0) | 2021.05.16 |
| 가상 DOM (0) | 2021.05.14 |
| 리액트와 JSX의 관계 (0) | 2021.05.13 |
| 리액트입문 (0) | 2021.04.26 |
