리액트의 폼

 

폼은 사용자로부터 입력을 받기 위해 사용함.

 

1) 제어 컴포넌트

 

> 사용자가 입력한 값에 접근하고, 제어할 수 있도록 해 주는 컴포넌트

제어 컴포넌트는 그 값이 리액트의 통제를 받는 입력 폼 엘리먼트 (input form element) 를 의미함.

 

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>
        )
}

 

위의 코드에서 <input> 태그의 value={value} 는 리액트 컴포넌트의 state 에서 값을 가져다 넣어 주는 것임.

그래서 항상 state 에 들어 있는 값이 input 에 표시됨!

또한, 입력값이 변경되었을 때, 호출되는 onChange 에는 onChange={handleChange} 처럼 handleChange 함수가 호출되도록 했는데, handleChange 함수에서는 setValue() 함수를 사용하여 새롭게 변경된 값을 value 라는 이름의 state 에 저장함.

 

onChange 콜백 함수의 첫 번째 파라미터 event는 이벤트 객체를 나타냄.

event.target 은 현재 발생한 이벤트의 타겟을 의미함.

event.target.value 는 해당 타겟의 value 속성값을 의미함.

즉, 여기에서의 타겟은 input 엘리먼트가 되며 event.target.value 는 input 엘리먼트의 값이 됨.

 

제어 컴포넌트를 사용하면 여러 개의 입력 양식 값을 원하는대로 조종할 수 있다.

 

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

 

위의 코드에서 handleChange() 함수로 들어오는 이벤트 타겟 값을 toUpperCase() 함수를 사용하여 모두 대문자로 변경한 뒤에 그 값을 state 에 저장함. 제어 컴포넌트를 통해 사용자의 입력을 직접 제어할 수 있음!

 

2) textarea 태그

 

function RequestForm (props) {
	const [value, setValue] = useState('요청 사항을 입력하세요.');
    
        const handleChange = (event) => {
            setValue(event.target.value);
        }

        const handleSubmit = (event) => {
            alert('입력한 요청사항' + value);
            event.preventDefault();
        }

        return (
            <form onSubmit={handleSubmit}>
                    <label>
                        요청사항 :
                        <textarea value={value} onChange={handleChange} />
                    </label>
                    <button type="submit">제출</button>
            </form>
        )
}

 

위 코드는 고객으로부터 요청사항을 입력받기 위한 RequestForm 컴포넌트임.

state 로는 value 가 있고, 이 값을 <textarea> 태그의 value 라는 attribute 에 넣어줌으로써 화면에 나타남.

여기에서 value 를 선언할 때 초기값을 넣어 줬기 때문에 처음 렌더링 될 때부터 <textarea> 에 텍스트가 나타나게 됨.

 

3) select 태그

 

function TheboyzSelect (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="hyunjae">현재</option>
                        <option value="q">큐</option>
                        <option value="new">뉴</option>
                        <option value="juhaknyeon">주학년</option>
                    </select>
                </label>
                <button type="submit">제출</button>
            </form>
        )
}

 

위 코드의 TheboyzSelect 라는 컴포넌트가 있음.

이 컴포넌트의 state 는 grape 라는 초기값을 가진 value 가 하나 있음.

그리고 이 값을 <select> 태그에 value 로 넣어 주고 있음.

값이 변경된 경우에는 위와 마찬가지로 handleChange() 함수에서 setValue() 함수를 사용하여 값을 업데이트 함.

이 방식을 사용하여 사용자가 옵션을 선택했을 때 value 라는 하나의 값만을 업데이트 하면 되기 땜에 편리함.

 

<select multiple={true} value={['b', 'c']}>

 

만약, 목록에서 다중으로 선택이 되도록 하려면 multiple 이라는 속성값을 true 로 하고, value 로 선택된 옵션의 값이 들어 있는 배열을 넣어 주면 됨!

 

 

 

<input type="text"> 태그

<textarea> 태그

<select> 태그

를 제어 컴포넌트로 만드는 방식은 모두 비슷함.

모두 value 라는 attribute 를 통해서 값을 전달하고, 값을 변경할 때는 onChange 에서 setValue() 함수를 사용하여 값을 업데이트 함.

이러한 방식은 모두 실제로 사용자가 입력을 받는 컴포넌트를 만들 때 사용하기 땜시롱 잘 기억해야 함~

 

4) File input 태그

 

<input type="file" />

 

file input 태그는 그 값이 읽기 전용 (Read-Only) 이기 때문에 리액트에서는 비제어 컴포넌트 (uncontrolled component) 가 됨.

 

 

5) 여러 개의 입력 다루기

 

function Reservation (props) {
	const [haveBreakfast, setHaveBreakfast] = useState(true);
        const [numberOfGuest, setNumberOfGuest] = useState(2);

        const handleSubmit = (event) => {
            alert(`아침 식사 여부 : ${haveBreakfast}, 방문객 수 : ${numberOfGuest}`);
            event.preventDefault();
        }

        return (
            <form onSubmit={handleSubmit}>
                <label>
                    아침 식사 여부 : 
                    <input
                        type="checkbox"
                        checked={haveBreakfast}
                        onChange={(event) => {
                            setHaveBreakfast(event.target.checked);
                        }}
                    />
                </label>

                <label>
                    방문객 수 :
                    <input
                        type="number"
                        value={numberOfGuest}
                        onChange={(event) => {
                            setNumberOfGuest(event.target.value);
                        }}
                    />
                </label>
                <button type="submit">제출</button>
            </form>
        )
}

 

위 코드의 Reservation 컴포넌트는 예약을 하기 위해 필요한 정보 두 가지를 입력받도록 되어 있음.

아침 식사 선택 유무를 입력받기 위한 <input> 태그는 type checkbox 로 되어 있고, 값이 변경되면 setHaveBreakfast() 함수를 통해 값을 업데이트 함.

방문객 수를 입력받기 위한 <input> 태그는 type 이 number 로 되어 있고, 값이 변경되면 setNumberOfGuest() 함수를 통해 값을 업데이트 함.

 

함수 컴포넌트에서는 각 state 의 변수마다 set 함수가 따로 존재하기 때문에 위와 같은 형태로 각각의 set 함수를 사용해서 구현하면 됨.

 

5) input null value

 

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

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