[React] Controlled Component

Controlled Component

: 사용자의 입력값에 접근, 제어해주는 Component.

• React의 통제를 받는 Input Form Element를 뜻합니다.
• <form>을 return합니다.
• input, select, textarea등의 element가 갖는 state(데이터)를 component의 state로 관리합니다.
• state이므로 setState를 이용하여 값을 변경합니다.

---

Controlled Component 사용법

// JSX

function NameForm(props){
    const [value, setValue] = useState('');

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

    return (
        <form>
            <label>이름 : </label>
            <input type="text" value={value} onChange={nameTyping} />
            <button type="submit">제출</button>
        </form>
    )
}

• 입력태그인 input의 value값을 state의 값으로 설정합니다.
• onChange에 setState()를 실행하는 function을 연결하여 입력시 state값을 바꾸게 설정합니다.

---

textarea

// JSX
<textarea value={state} onChange={setState()}/>

• HTML에서 textarea는 태그사이에 입력값을 사용합니다.
• Controlled Component에서는 value에 state를 넣어 사용합니다.

---

input

// JSX
<input value={state} onChange={setState()}/>

• textarea와 동일한 형식으로 사용합니다.

---

select

// JSX
const { state, setState } = useState('grape');
<select value={state} onChange={setState()}>
	<option value="apple">사과</option>
  	<option value="banana">바나나</option>
  	<option value="grape">포도</option>
</select>

• selet 태그에 value를 설정합니다.
• HTML에서의 selected 기능은 useState에 기본값을 설정해주어 사용합니다.

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

• 위와 같이 multiple 설정을 통해 다중 선택값을 받을 수 있습니다.