컴포넌트 컨트롤

Controlled Components

• 사용자가 입력한 값을 제어할 수 있게 해주는 컴포넌트를 의미한다.

HTML 폼 vs controlled 컴포넌트

• HTML 폼은 자체적으로 state를 관리한다.
• html에서 사용되는 inpuut, textarea, select같은 여러 태그들에 대해 각각 state로 하여 따로 관리해야한다.

• 자바스크립트를 이용해 각 객체에 따로 접근하는 것이 어렵다.

• 반면 Controlled Component에서는 모든 데이터가 state에서 관리된다. 원하는 state만 뽑아내 추출하고 이를 자바스크립트로 활용이 가능한 것.
• state={} / setState()

function NameForm(props){
  const [value, setValue] = useState('');
  const handleChange = (event) => {
    setValue(event.target.value);
  }

  const handleSubmit = (event) 
=> {
  alert('입력한 이름: ' + value);
  event.preventDefault();
}
  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type ="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">제출</button>  
    </form>
  ) 
}

• 위 코드는 사용자의 입력값을 받아 처리하는 코드인데 handleSubmit의 event.target.value를 보면 사용자가 이름을 입력하고 submit 버튼을 눌러 onSubmit이라는 이벤트를 발생시키고 이 이벤트가 event인 것.
• 이 event의 target은 input된 event의 element를 의미하고 그 element안에 있는 값을 .value를 통해 가져올 수 있는 것이다.

form의 종류

textarea

• 말 그대로 글자를 보여준다. ```html

가나다라마사바

 -리액트에서는 html과 달리 문자열을 value라는 속성에 {}로 감싸 넣어준다.

```javascript
<textarea value={value} onChange = {handleChange}/>

select태그

• 드롭다운으로 특정 목록을 보여주기 위한 html 태그이다.

  <select>
  <option value = "apple">사과</option>
  <option value = "banana">바나나</option>
  <option selected value = "grape">포도</option>
  <option value = "watermelon">수박</option>
  </select>
  

• selected라는 속성은 해당 옵션이 선택되었음을 나타낸다.
• 이를 리액트로 구현하면 다음과 같이 사용가능하다.

  function FruitSelect(props){
  const [value, setValue] = useState('grape');
  const handleChange = (event) => {
    setValue(event.target.value);
  }
  
  const handleSubmit = (event) => {
    alert('선택한 과일: ' + value);
    event.preventDefault();
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <label>
         과일을 고르시오:
        <select value={value} onChange={handleChange}>
            <option value = "apple">사과</option>
            <option value = "banana">바나나</option>
            <option value = "grape">포도</option>
            <option value = "watermelon">수박</option>
        </select>
      </label>
      <button type="submit">제출</button>  
    </form>
  ) 
  }
  

• select value={value}를 통해 컴포넌트 내의 value라는 변수의 값을 select 태그의 속성인 value의 값으로 넣어주고 있다.
• 만약 value값을 다중으로 선택하려면 아래와 같이 작성한다.

  <select mutiple = {true} value={['B','C']}>
  

File input 태그

• 디바이스 저장 장치로부터 여러개의 파일을 선탣할 수 있게 해주는 HTML 태그이다.

  <input type="file"/>
  

• 이 태그는 파일을 읽기만 하기에(read-only) 리액트의 통제를 받지 않는 Uncontrolled Component이다.

Input Null Value

• Value prop은 고정하되 정해진 값이 아닌 사용자가 원하는 값을 넣을 수 있게 설정하고 싶다면 값에 undefined 혹은 null을 넣어주면 된다.

ReactDOM.render(<input value="hi" />, rootNode);

setTimeout(function(){
    ReactDOM.render(<input value={null} />, rootNode)
}, 1000);

• 예시를 보면 input태그의 value로 “hi”라는 값이 고정되게 설정했다.
• 하지만 setTimeout함수 하위에 다른 render함수를 호출하여 1000m/s, 즉 1초 뒤에 value가 null인 input태그가 호출되고 사용자가 입력 가능한 상태로 바뀌게 된다.