[React] 바인딩 구현

input태그에 입력된 text를 상단의 태그에 그대로 나타내는 방식으로 바인딩을 구현해본다.

틀을 만들어준다. 제목 태그와

input내용이 바인딩 되어 들어갈 div태그를 만들어주고 구분선을 그어준다.

input태그는 text타입에 입력된 내용을 this.state.msg를 통해

상태 중 메세지를 값으로 전달하고

handleChange라는 함수를 생성해 바인딩을 구현한다.

변경된 내용을 상태에 전달해줄 handleChange 메소드를 구현한다.

setState를 이용해 상태값을 변경해주는데,

state중 msg를 이벤트 객체가 타게팅된 곳 (input태그)의 값으로 변경해준다.

기본 상태값은 메세지입니다.라는 text로 설정해주고 

handleChange에서 State에 접근해주기 위해 bind를 사용해 상위 개체의 state에 접근해준다.

input에 입력된 값은 value를 타고가

handleChange함수에서 상태값을 변경하게 되고

div태그에 변경된 상태값이 그대로 나타나게 된다.