Props와 State가 너무 헷갈려서 복습
App.js(부모) -> MyName.js(자식) 값 전달 예시
App.js
import React, { Component } from 'react';
import MyName from './components/MyName.js';
class App extends Component {
render() {
return (
<MyName name = "리액트" /> // MyName에 name value값 전달(Props)
);
}
}
export default App;
MyName.js
import React, { Component } from 'react';
Class MyName extends Component {
render() {
return (
<div>
Hi. My Name is <this.props.name> // props로 부모(App.js)에서 데이터 받아옴(name의 value값)
</div>
);
}
}
export default MyName;
static defaultProps = {
name : " defaultName "
}
// 클래스형을 함수형으로 대체
const MyName = ({name}) => {
return (
<div>
Hi. My Name is {name}
</div>
import React, { Component } from 'react';
//1. state 정의
Class Counter extends Component {
state = {
number = 0
}
//2. 메소드 작성
handleIncrease = () => {
//3. setState
this.setState ({
number : this.state.number + 1
});
}
handleDecrease = () => {
this.setState({
number : this.state.number - 1
});
}
//4. 이벤트 설정
render() {
return (
<div>
<h1>카운터</h1>
<div> 값 : {this.state.number} </div>
<button onClick = {this.handleIncrease}+</button>
<button onClick = {this.handleDecrease}-</button>
</div>
Class Counter extends Component {
state = {
number = 0
}
handleIncrease = () => {
//3. setState
this.setState ({
number : this.state.number + 1
});
}
handleDecrease = () => {
this.setState({
number : this.state.number - 1
});
}
//바인딩 예시
constructor(props) {
super(props);
this.handleIncrease = this.handleIncrease.bind(this);
this.handleDecrease = this.handleDecrease.bind(this);
}
//예시
state = {
number : 0,
foo : 'bar'
}
//state값이 두 개인 경우 this.setState({ number : 1}); 을 해주면 아래같이 변경됨
state = {
number : 1,
foo : 'bar'
}
//예시
state = {
number : 0,
foo : {
bar : 0,
foobar : 1
}
}
// 이렇게 객체 내 객체가 있는 경우
this.setState({
foo: {
foobar : 2
}
})
//위처럼 한다고 해서 foobar만 바뀌지 않는다.
//그냥 foo 객체 자체가 바뀌어버림
{
number : 0,
foo : {
foobar : 2
}
}
그래서 state 객체 내부 객체에 접근하기 위해서는 전개연산자를 사용해야함.
this.setState ({
number : 0,
foo : {
...this.state.foo,
foobar : 2
}
});
//html 방식
<button onclick = "alert('hello');">Click btn</button>
<button onClick={this.handleIncrease}>+</button>
onClick = {this.handleIncrease()}
이런 식으로 호출하면 렌더링할때마다 함수가 호출됨. 그러면