ReactJS 상태(State)

상태는 데이터의 출처입니다. 우리는 상태를 최대한 간단하게 유지하고, 상태 컴포넌트의 수를 최소화하려고 노력해야 합니다. 예를 들어, 우리가10하나의 컴포넌트가 상태의 데이터를 필요로 한다면, 모든 컴포넌트의 상태를 저장하는 컨테이너 컴포넌트를 생성해야 합니다.

상태 사용

다음 예제 코드는 EcmaScript를 사용하여 상태를 사용하는 방법을 보여줍니다.2016상태 컴포넌트를 생성하는 문법.

App.jsx

import　React　from　'react';
class　App　extends　React.Component　{　　　constructor(props)　{　　　　　　super(props);
　　　　　　this.state　=　{
　　　　　　　　　header:　"Header　from　state...",
　　　　　　　　　content:　"Content　from　state..."
　　　　　　}
　　　}　　　render()　{
　　　　　　return　(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>{this.state.header}</h1>
　　　　　　　　　　　　<h2>{this.state.content}</h2>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export　default　App;

main.js

import　React　from　'react';
import　ReactDOM　from　'react-dom';
import　App　from　'./App.jsx';
ReactDOM.render(<App　/,　document.getElementById('app'));

이렇게 될 것입니다.