input 상태관리

AddPlayerForm 화면구성

player를 추가하는 폼을 만들자 AddPlayerForm 컴포넌트를 추가한다. stateful한 컴포넌트가 되어야 하므로 class 컴포넌트로 작성한다. form 내부에 input 박스와 submit 버튼을 추가한다.

html 의 input은 닫는 태그가 없지만 JSX는 반드시 닫는 태그가 존재해야 한다는것에 주의하자.

App 컴포넌트에 AddPlayerForm 컴포넌트를 맨 하단에 추가한다.

controlled component 만들기

HTML element는 자기 자신의 state를 가지고 있고, 사용자의 입력에 따라 그 state를 업데이트한다. 리액트에서는 이와 같이 mutable state는 컴포넌트의 state 속성에 정의하고 setState로 업데이트해야 한다. 그러므로 input form은 리액트에서 컨트롤되어야 하는데 이와 같은 컴포는트를 controlled component라고 한다. 사용자가 input을 입력하면 바로 상태가 바뀌고 바뀐 상태가 바로 리렌더링되서 화면에 보여주게 된다. input 의 value를 controlled component로 만들어보자.

1) 먼저 시간에 따라 변하는 입력값을 state에 value로 정의하고 input에 value와 연결한다. 그리고 테스트해보자. input 에 값을 넣으면 값이 입력이 되는가? 입력이 되지 않고 하단 warning을 확인해보자. onChange 이벤트를 구현하라고 나올것이다.

2) onChange 이벤트 구현

player 추가 로직 구현

첫번재로 부모 컴포넌트에 player를 추가하는 handleAddPlayer 이벤트의 로직을 작성한다.

두번째로 AddPlayerForm 컴포넌트에 이 함수를 props로 내려준다.

세번째로 AddPlayerForm에서 이 props의 함수를 호출한다.

이 핸들러를 이제 자식 컴포넌트에게 addPlayer라는 속성으로 내려준다

submit event

submit 을 누르면 submit 이벤트가 발생하여 player를 추가할 수 있게 한다. players state는 App 컴포넌트가 갖고 있으므로 submit 이벤트가 발생하면 name을 파라메터로 상위 부모에게 전달하여야 한다.

addPlayer 속성으로 내려줬으므로 AddPlayerForm 컴포넌트에서는 이 props를 호출한다.

submit 이벤트는 기본 이벤트가 다른 페이지로 전환하게 되므로 preventDefault() 를 사용하여 기본 이벤트를 막아야 한다. 만일 기본 이벤트를 막지 않으면 페이지가 리로드 되면서 모둔 상태 변수들이 초기화가 된다. SPA에서는 페이지 리로드가 일어나지 않도록 주의해야 한다.

html5 validation

input에 아무것도 입력되지 않으면 submit이 되지 않도록 하되 html5 validation을 사용하자.

input에 required 속성만 추가하면 된다.

+ Q: required 속성을 추가하고 입력값이 없이 클릭시 submit 이벤트가 일어나는가?

html5 validation을 하지 않기 위해서는 form에 noValidate 를 추가한다.

form의 유효성을 체크하기위해서 checkValidity(), 입력 노드의 유효성은 validity.valid로 체크한다.

React에서 Dom 노드에 접근 하는 방법은 class 컴포넌트에서는 React.createRef() 를 사용하고 Dom에는 생성된 변수를 ref 에 넣어준다. 그리고 current로 접근하면 Dom노드에 접근할 수 있게 된다.

– note

+ controlled component

– quiz