8. 제어 컴포넌트

 

Controlled Components (제어 컴포넌트)는 값이 리액트의 통제를 받는 Input Form Element이다.

• HTML 폼에서는 각 엘리먼트가 자체적으로 state를 관리한다. 이 경우 자바스크립트 코드를 통해 각각의 값에 접근하기 어렵다.
• 제어 컴포넌트에서는 모든 데이터를 state에서 관리한다. 사용자의 입력을 직접적으로 제어할 수 있다.

 

 

 

input 태그

사용자 입력이 발생하면 event 객체를 이용해 setState()를 호출하여 사용자의 입력을 자신의 state로 저장하고, 상태값을 엘리먼트의 value 속성값으로 나타낸다.

 

export default function App(){
	const [input, setInput] = useState("");
    const onChange = (e) => {
        setInput(e.target.value);
    };
    return (
    	<form>
      		<input onChange={onChange} value={input} />
    	</form>
  	);
}

 

- 예시2

모든 입력값을 대문자로 변경하는 코드. handleChange를 통해 들어오는 event의 target value를 toUpperCase를 사용해서 대문자로 변경한 다음 그 값을 state에 저장한다.

const handleChange = (event) => {
  setValue(event.target.value.toUpperCase());
}

 

 

Textarea 태그

여러 줄에 걸쳐 긴 텍스트를 입력받기 위한 html 태그

 

- HTML textarea 태그

<textarea>
  여기에 텍스트가 입력됩니다.
</textarea>

 

- 예시

function RequestForm(props){
 const [value, setValue] = useState('요청사항을 입력하세요');
 
 const handleChange = (event) => {
   setValue(event.target.value);
 }
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        요청사항:
        <textarea value={value} onChange=handleChange/>
       </label>
     </form>  
  )
 }

 

 

Select 태그

 drop-down 목록(여러가지 옵션 중 선택)을 보여주기 위한 html 태그

 

- HTML select 태그

//선택된 값은 selected로 표시
<select>
  <option value="apple">사과</option>
  <option selected value='grape'>포도</option>
</select>

 

- 예시

function FruitSelect(props) {
  const [value, setValue] = useState('grape');
  
  const handleChange = (event) => {
    setValue(event.target.value);
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <label>
        과일을 선택하세요:
        <select value = {value} onChange={handleChange}>
          <option value="apple">사과</option>
          <option value="grape">포도</option>
        </select>
      </label>
    </form>  
  )
}

 

- 다중 선택

//multiple 사용
<select multiple={true} value={['B','C']}>

 

 

정리

//input 태그
<input type="text" value={value} onChange={handleChange} />

//textarea 태그
<textarea value={value} onChange={handleChange} />

//select 태그
 <select value = {value} onChange={handleChange}>
          <option value="apple">사과</option>
          <option value="grape">포도</option>
 </select>

 

 

NULL

제어 컴포넌트에 value prop 을 정해진 값으로 넣으면 코드를 수정하지 않는 한 입력값을 바꿀 수 없다.

만약 value prop을 넣되 자유롭게 입력할 수 있게 만들고 싶다면 값에 undefined 또는 null을 넣으면 된다.

const root = ReactDOM.createRoot(rootNode);
root.render(<input value="hi" />);

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