리액트 학습 중, Props와 State에 관해 간단하게 정리해둡니다.
Properties의 줄임말.
부모 요소에서 자식 요소에 다시 내려주지 않는 이상 값은 불변.
즉, 읽기 전용으로서 자식 요소에서 값을 변경할 수 없습니다.
function Show(props){
return (
<h3>
Name is {props.name}
</h3>
);
}
Show.defaultProps = {
name : 'asdf'
}
// 컴포넌트에 Prop에 전달되지 않을 경우를 대비한 기본 값 설정
ReactDOM.render(<Show />, document.getElementById('root'));
위처럼 함수형 컴포넌트에 인자로 전달될 수도 있고,
클래스의 생성자에 인자로 전달되거나 하는 예제가 있을 수 있습니다.
Component 내부에서 선언하며, 값 변경 가능.
즉, 가변 데이터이며 Component에 의해 유지된다고 요약할 수 있습니다.
State는 Class 문법과 함께 사용되어야 합니다.
var post = React.createClass({
getInitialState : function () {
return {
title : '테스트타이틀'
}
},
render : function () {
return (
<div>
<p>{ this.state.title }</p>
</div>
)
}
});
위와 같이 createClass와 사용될 수 있겠고
아래처럼 class를 직접 명시하여 사용할 수 있습니다.
import React, { Component } from 'react';
class Temp extends Component {
constructor(props) {
super(props);
this.state = {
name: '이름'
}
}
nameChange = () => {
this.setState({
name: '변경된 이름'
});
}
nameRecovery = () =>{
this.setState({
name: '이름'
});
}
render() {
return (
<div>
<h1>State Test</h1>
<div>이름: {this.state.name}</div>
<button onClick={this.nameChange}>이름 바꾸기</button>
<button onClick={this.nameRecovery}>이름 복구</button>
</div>
);
}
}
State를 변경하기 위해서는 setState를 사용해야합니다.
또한 setState가 호출되면 변경을 반영하기 위해 리액트는 리렌더링합니다.
https://medium.com/@yms0214/react-3-props-%EC%99%80-state-cf8cbf37d0e7
https://velopert.com/3486 :: immutable.js 사용법