정복기(7) - state
props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값. 자식 컴포넌트는 해당 props를 읽기 전용으로만 사용할 수 있으며, porps를 바꾸려면 부모 컴포넌트에서 바꿔 줘야 함
state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미 함
함수형 컴포넌트에서는 state를 사용하며,
클래스형 컴포넌트에서는 useState라는 함수를 통해 state를 사용
state를 사용한 컴포넌트(클래스형)
Puppy.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class Puppy extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
static defaultProps = {
name: 'default puppy name'
};
static propTypes = {
name: PropTypes.string,
age: PropTypes.number.isRequired
};
render() {
const {name, age} = this.props;
const {count} = this.state;
return (
<div>
<div>내 강아지 이름은 {name} 입니다.</div>
<div>내 강아지 나이는 {age} 입니다.</div>
<div>{count} 마리가 있습니다.</div>
<button onClick={() => {
this.setState({count: count + 1})
}}>
입양 +1
</button>
</div>
);
}
}
export default Puppy;
- 컴포넌트에 state를 설정할 때는 constructor(생성자) 메서드를 사용
- constructor를 작성할 때는 반드시 super(props)를 호출해야 함
- 생성자 안에서 this.state 초기값을 설정
- this.state는 객체 형식이어야 함 - this.setState를 사용하여 state값을 바꿀 수 있음. 여기서는 count 값을 변경
state를 constructor에서 꺼낸 컴포넌트(클래스형)
Puppy.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class Puppy extends Component {
state = {
count: 0
};
static defaultProps = {
name: 'default puppy name'
};
static propTypes = {
name: PropTypes.string,
age: PropTypes.number.isRequired
};
render() {
const {name, age} = this.props;
const {count} = this.state;
return (
<div>
<div>내 강아지 이름은 {name} 입니다.</div>
<div>내 강아지 나이는 {age} 입니다.</div>
<div>{count} 마리가 있습니다.</div>
<button onClick={() => {
this.setState({count: count + 1})
}}>
입양 +1
</button>
</div>
);
}
}
export default Puppy;
훨씬 코드가 간결해 졌음을 확인할 수 있다!!
this.setState에 객체 대신 함수를 전달해야 하는 이유
바로 위 소스에서는 this.setState에 객체를 전달 했으나 잘 동작했다. 하지만 아래 소스처럼 this.setState에 객체를 전달하여 두번 호출하면 +2가 되지 않고 +1만 수행된다. 이는 state 값을 업데이트할때 상태가 비동기적으로 업데이트되기 때문이다.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class Puppy extends Component {
state = {
count: 0
};
static defaultProps = {
name: 'default puppy name'
};
static propTypes = {
name: PropTypes.string,
age: PropTypes.number.isRequired
};
render() {
const {name, age} = this.props;
const {count} = this.state;
return (
<div>
<div>내 강아지 이름은 {name} 입니다.</div>
<div>내 강아지 나이는 {age} 입니다.</div>
<div>{count} 마리가 있습니다.</div>
<button onClick={() => {
this.setState({count: count + 1})
}}>
입양 +1
</button>
<button onClick={() => {
this.setState({count: count + 1})
this.setState({count: count + 1})
}}>
입양 +2
</button>
</div>
);
}
}
export default Puppy;
setState 인자에 객체 대신 함수를 넘겨 구현한 Puppy 컴포넌트
import React, {Component} from 'react';
import PropTypes from 'prop-types';
class Puppy extends Component {
state = {
count: 0
};
static defaultProps = {
name: 'default puppy name'
};
static propTypes = {
name: PropTypes.string,
age: PropTypes.number.isRequired
};
render() {
const {name, age} = this.props;
const {count} = this.state;
return (
<div>
<div>내 강아지 이름은 {name} 입니다.</div>
<div>내 강아지 나이는 {age} 입니다.</div>
<div>{count} 마리가 있습니다.</div>
<button onClick={() => {
this.setState({count: count + 1})
}}>
입양 +1
</button>
<button onClick={() => {
this.setState(prevState => {
return {
count: prevState.count + 1
};
});
this.setState(prevState => ({
count: prevState.count + 1
}));
}}>
입양 +2
</button>
</div>
);
}
}
export default Puppy;
"입양 +2" 버튼의 두 setState의 동작은 동일함. prevState는 기존 상태를 나타냄
함수형 컴포넌트는 "리액트를 다루는 기술" 8장에서 이어져 추후 설명 하도록 한다
Author And Source
이 문제에 관하여(정복기(7) - state), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@orangetreex/React-정복기7-state저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)