[Epic React] form 사용하기

 

Epic React

by Kent C. Dodds

https://epicreact.dev/learn/

kent c dodds 의  Epic React 기초 강의 공부 내용 정리이다.

추가로 적고 넘어갈만한 팁이 있다면

fragment는 flexbox나 grid랑 사용하면 좋다고 한다.

jsx를 바벨이 해석할 때. 함수형 컴포넌트와 일반 컴포넌트를 맨 앞글자의 대소문자 여부로 판단하기 때문에 주의해야 함.

 

 

function UsernameForm({onSubmitUsername}) {

  const [error,setError] = React.useState(null);
  const [value,setValue] = React.useState("");

  function handleSubmit(event){
    event.preventDefault()
    const value = event.target.elements.usernameInput.value;
    onSubmitUsername(value);
  }
  // function handleChange(event){
  //   setError(event.target.value===event.target.value.toLowerCase() ? null : 'username must be lower case')
  // }
  function handleChange(event){
    setValue(event.target.value.toLowerCase());
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="usernameInput">Username:</label>
        <input type="text" id="usernameInput" onChange={handleChange} value={value}/>
      </div>
      <div style={{color:'red'}}>{error}</div>
      <div>
      <button type="submit" disabled={Boolean(error)}>Submit</button>
      </div>
    </form>
  )
}

 

kent는 form의 input에 id를 사용하는 것을 좋아함.

label도 htmlFor와 id를 이용하여 사용

 

리액트는 실제 event 객체가 아닌 SyntheticEvent라는 객체를 성능상 문제로 사용함.

event.nativeEvent로 실제 이벤트 객체에 접근 가능

 

error state를 event.target.value로 검증할 수 있지만,

setState를 이용하여 사용자가 애초에 입력할수 없도록 할 수도 있다.

 

또한 kent는 useRef를 별로 좋아하지 않는다 함.