인풋을 이야기하지만, 사실상 이벤트에 대한 이야기다.
이벤트는 사용자가 하는 어떤 행위이다.
버튼을 클릭하거나, 입력창에 텍스트를 입력한다던가 하는 그런 이벤트
이벤트가 발생하는 태그는 input, button 등이 있다.
그 중 input에 대해 배우면, button도 자연스레 알기 쉬워진다.
1. input 태그
- <input />
- name : input 태그의 명칭
- placeholder : input 최초값 (상수)
- onChange : input의 값이 변경됨을 감지했을 때 실행할 함수 매칭
- value : input의 값
2. state 정의
- name : "홍길동",
- myphone : "0000"
사실상, placeholder가 없으면, state 첫 선언 시 초기설정 가능, 하지만 placeholder를 별도로 관리하는 것이 여러 개발자가 공동으로 협업할 때는 훨씬 수월하다.
3. 입력란이 변경되면 뭔가를 해줘야해~
handleChange() 함수 만들기 (이름은 내맘대로 짓기)
| handleChange = (e) =>{
this.setState({
[e.target.name] : e.target.value,
});
}
|
handleChange = (e) =>{
※ (참고) (e) => { e를 받아서 할 일들 }
e는 우리가 통상쓰는 변수이다. e가 아니라, x를 써도 되고, y를 써도 된다.
이 함수는 어떤 객체를 넘겨받는다는 것을 뜻한다.
e가 뭔지는 모르지만, 뭔가 e라는 놈을 넘겨받을 거란 얘기!!!
this.setState({
setState 는 리렌더링이라고 생각하면 쉽다. 웹페이지를 새로고침하는것과 비슷하다.
왜 새로고침해야할까? 화면에 표현된 어떤 값이 변경되었기 때문이다. 우린 그걸, 상태변화 라 하기로 했다.
어떤 상태가 변했을 때 변화된 값을 띄워주기 위해 페이지를 새로고침하는것.
(화면이 바뀐다? 상태가 변화된다? 어떤 예가 있을까??)
가령, 유투브에 댓글을 쓰고, 클릭!하면, 내 댓글이 해당 유투브 댓글란에 올라간다. 댓글란에 올라가기 전과 후, 상태는 변화된 것이다.
this. ==> setState는 내장함수이다. 이미 선언되어있다. 그래서 내가 가지고 있는 바로 이 함수를 쓸거야~라고 얘기해주기 위해 this를 쓴다.
아...그런데 난 setState를 만든적이 없는데? 라고 하실수 있다.
클래스 정의할 때 extends를 사용해서 부모로부터 상속받았던것이다.부모님이 누구야? Component. 리액에서 정의해놓은 컴포넌트~
[e.target.name] : e.target.value키 : 값 형태의 json 형식이다.키는 e.target.name, 즉 input 태그 상에서 넘겨준 객체인 e의 name이란 변수이다.두개의 input form에서 첫번째 입력란은 name = "name" 두번째입력란은 name="myphone"이라고 선언했다. 여기서 "name"과 "myphone"은 변화하지 않는 value일 것 같으나, 사실상 state에 해당하는 값이다."name"과 "myphone"은 내가 입력하는 값을 받는 변수와도 같다.
따라서, value = this.state.name 또는 myphone으로 선언해주는 것이다.
