props 와 state 는 리액트 컴포넌트에서 다루는 데이터다.
props 부터 살펴보자.
앞의 글에서 app.js 를 통해서 화면을 조작했다.
여기서는 새로운 js파일을 만들것이다.
MyName.js 를 만들었다.
import React, {Component} from 'react';
class MyName extends Component {
render() {
return (
<div>
hello my name is <b>{this.props.value}</b>
</div>
);
}
}
export default MyName;
이것 또한 export한다.
app.js 에서 가져다 쓴다.
import React, { Component } from 'react';
import MyName from './MyName';
import './App.css';
class App extends Component {
render() {
return (
<div>
<MyName value = "react"></MyName>
{/* value 라고 적었다면 MyName.js 에서 this.props.value라고 적어야 한다.
name 이라고 적었으면 MyName.js에서 this.props.name이라고 적어야 한다. */}
<div className = "divpaper">
hello divpaper
</div>
<div id = "divpap">
hello divpap
</div>
</div>
);
}
}
export default App;
이렇게 코드를 작성하면 <MyName> 태그 부분에는 MyName.js 에서 내보낸 내용이 들어간다.
리액트는 프론트엔드 기술이다.
그냥 리액트 쓰지 말고 부트스트랩으로 하면 되지 않느냐고 물을 수 있다.
지금까지 해보고 느낀 것은 이렇게 작성하면 <div> </div> 컴포넌트의 재사용성이 매우 높다.
화면에서 반복되는 부분이 있다면 여러 개의 js파일로 쪼개놓고 <MyName> 쓰듯이 조합하면 될 것 같다.
아무튼 <MyName value = > 에서 value 처럼 컴포넌트에서 데이터를 사용 하는 것을 props 라고 한다.
그런데 코드를 적다보면 app.js의 <MyName에서 value 값을 적지 않은 경우가 있을 수 있다.
이럴때 초기 값을 설정 할 수 있다.
그것을 default props 라고 부른다.
app.js 에서 value 를 지워봤다.
import React, { Component } from 'react';
import MyName from './MyName';
import './App.css';
class App extends Component {
render() {
return (
<div>
<MyName></MyName>
<div className = "divpaper">
hello divpaper
</div>
<div id = "divpap">
hello divpap
</div>
</div>
);
}
}
export default App;
MyName.js 는 이렇게 바꿨다.
import React, {Component} from 'react';
class MyName extends Component {
static defaultProps = {
value : 'default name'
}
render() {
return (
<div>
hello my name is <b>{this.props.value}</b>
</div>
);
}
}
export default MyName;
함수형 컴포넌트도 쓸 수 있다.
MyName.js 의 코드.
import React from 'react';
const MyName = ({ name }) => {
return (
<div>
hello my name is {name}
</div>
);
};
export default MyName;
app.js 는 동일하게 작성해도 된다.
자 여기까지는 정적인 데이터인 props 였다.
동적 데이터인 state 를 한번 보자.
코드는 이렇다.
Counter.js 라는 파일을 생성했다.
import React, {Component} from 'react';
class Counter extends Component{
state = {
number: 0
}
handleIncrease = () => {
this.setState({
number: this.state.number +1
});
}
handleDecrease = () => {
this.setState({
number: this.state.number -1
});
}
render(){
return (
<div>
<h1>카운터</h1>
<div>값 : {this.state.number}</div>
<button onClick={this.handleIncrease}>+</button>
<button onClick={this.handleDecrease}>-</button>
</div>
);
}
}
export default Counter;
버튼이 눌렸을때 count 가 증가하도록 한다.
그리고 app.js 에서 사용한다.
import React, { Component } from 'react';
import MyName from './MyName';
import Counter from './Counter';
import './App.css';
class App extends Component {
render() {
return (
<div>
<MyName name = 'hello'></MyName>
<div className = "divpaper">
hello divpaper
</div>
<div id = "divpap">
hello divpap
</div>
<Counter></Counter>
</div>
);
}
}
export default App;
Counter를 import 하고 있다.
return 의 아래 부분에 <Counter> </Counter> 태그가 있는 것을 볼 수 있다.
버튼을 누르면 this.handleIncrese , this.handleDecrease 가 호출 되도록 했다.
호출 되면 number를 +1 -1 한다.
댓글