React.js에서 데이터를 유동적으로 만들 때 state를 사용한다. 컴포넌트 내에 별도의 상태가 필요할 때 사용한다. state는 초기값 설정이 필수이며, 생성자에서 this.state = {}으로 설정한다.
props와는 다르게 state는 값을 변경할 때 직접 조작하면 안된다. 가령 this.state.comment = 'Hello';는 렌더링되지 않는다. this.state({comment: 'Hello'}); 처럼 객체 형식으로 적어야한다.
왜냐하면 React.js의 경우 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링을 하는데 setState메소드를 사용하지 않고 직접 state 값을 수정할 경우 변경을 감지하지 못해서 리렌더링을 하지 못하기 때문이다.
이후 render() 에서 this.state를 렌더링 할 수 있다. 또 this.setState(data, callback)를 통해 상태를 갱신할 수도 있다. 이 메서드를 실행하면 React는 전달하는 data를 현재 상태에 병합하고 render()를 호출한다.
이를 이용해서 로그인 창을 구현해봤다. this.state에 id라는 초기값을 설정했다. 그리고 해당 input에 onChange 값을 줘 상태 변화가 일어날 시에 발생된 값을 value에 전달해줬다. 이 과정은 this.setState의 id: e.target.value를 통해서 이뤄졌다. (onChange 이벤트가 발생하면, e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어올 수 있다)
constructor() {
super();
this.state = {
id: ""
};
}
handleIdInput = (e) => {
this.setState({
id: e.target.value
})
}
<input
id="id"
type="text"
className="input_id"
onChange={this.handleIdInput}
value={this.state.id}
/>
