React의 폼 ?

html 폼 엘리먼트는 폼 자체가 내부상태를 가짐.
그래서 react의 다른 dom 엘리먼트와는 다르게 동작함.
제어 컴포넌트라 불리는 기술을 이용함.

제어 컴포넌트

HTML에서 <input>, <textarea>, <select>와 같은 폼 엘리먼트는
일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다.
React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 된다.

우리는 React state를 "신뢰 가능한 단일 출처" 로 만들어 두 요소를 결합할 수 있다.
그러면 폼을 렌더링 하는 React 컴포넌트는 폼에 발생하는 사용자의 입력값을 제어한다.
이러한 입력폼 엘리먼트를 *'제어 컴포넌트' 라고 한다.

setState

컴포넌트 state의 변경 사항을 대기열에 집어넣고, React에게 해당 컴포넌트와 그 자식들에게 갱신된 state를 사용하여 다시 렌더링 시킨다. 이 메서드는 이벤트 핸들러와 서버응답에 따라 UI를 갱신할때 가장 많이 사용되는 메서드이다.

1) setState는 즉각 명령이 아닌 요청이다.!

인지성능의 향상을 위해 react는 이 메서드의 실행을 지연시키고 여러 컴포넌트를 한번에 갱신할 수있다. React는 state 변화가 즉시 적용되는것을 보장하지 않는다.

2) setState() 는 컴포넌트를 항상 즉각적으로 갱신하지 않는다.

오히려 여러 사항과 함께 일괄적으로 갱신하거나, 나중으로 미룰 수 있다. 이로인해, setState()를 호출하자마자 this.state에 접근하는것이 잠재적인 문제가 될수 있다.

이럴땐 componentDidUpdate 또는 setState 의 콜백 (setState(updater, callback)) 을 사용하자. 둘다 갱신이 적용된뒤 실행 되는것이 보장됨.

폼 엘리먼트로 사용자의 입력을 기반으로
자신의 state를 관리하고 업데이트를함. 일반적으로 컴포넌트의 state 속성에 유지됨
setState()에 업데이트됨

setState(updater, [callback]) 
updater는 (state, props) =>stateChange 

다음과같은형태.
변경사항이 적용되는 시점에서의 state를 참조. *직접 변경 불가능.