Front/React.js
[React] 사용자 정보 입력 받기 (Forms)
ddo04
2024. 8. 15. 01:43
[React] 사용자 정보 입력 받기
- signup 컴포넌트는 이름을 입력할 수 있는 input 태그와 입력된 값을 저장하기 위한 name이라는 state를 가지고 있음
- select 태그에는 총 두가지 옵션이 들어가 있는데 select 태그의 값이 변경되면 처리하기 위해 handleChangeGender라는 이벤트 핸들러를 만들어서 사용
📲 Form
- 사용자가 무언가를 선택을 해야 하는 것
- 사용자로부터 입력을 받기 위해 사용
// HTML Form
<form>
<label>
이름:
<input type="text" name="name"/>
</label>
<button type="submit">제출</button>
</form>- 리액트에서도 잘 작동하지만 자바스크립트 코드를 통해 사용자가 입력한 갑에 접근하기에는 불편한 구조
- 자바스크립트 코드에서 사용자가 입력한 값에 접근하고 제어할 수 있어야 웹페이지를 개발할 때 더 편리
📲 Controlled Components
- 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트
- 값이 React의 통제를 받는 Input Form Element 의미
- 리액트에서 모든 값을 통제할 수 있는 구조를 가지고 있음
- 입력 값이 React 컴포넌트의 state를 통해 관리
- 여러 개의 입력 양식의 값을 원하는 대로 조정할 수 있다는 말
- 입력 양식의 초기 값을 내가 원하는 대로 넣어줄 수 있으며 다른 양식의 값이 변경되었을 때 또 다른 양식의 값도 자동으로 변경시킬 수 있음
📲 Textarea 태그
- 여러 줄에 걸쳐 긴 텍스트를 입력받기 위한 HTML 태그
- HTML에서는 코드와 같이 텍스트를 태그가 감싸는 형태로 사용
<textarea>
안녕하세요, 여기에 이렇게 텍스트가 들어가게 됩니다.
</textarea>- React에서는 textarea 태그에 value라는 attribute를 사용하여 택스트 표시
📲 Select 태그
- Drop-down 목록을 보여주기 위한 HTML 태그
- 드롭다운 목록은 여러가지 옵션 중에서 하나를 선택할 수 있는 기능을 제공
- HTML에서는 코드와 같이 옵션 태그를 select 태그가 감싸는 형태로 사용
<select>
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option selected value="grape">포도</option>
<option value="watermelon">수박</option>
</select>- 옵션 태그에서 현재 선택된 옵션의 경우 selected을 가지고 있음
- React에서는 옵션 태그에 Selected 속성을 사용하지 않고 대신에 Select 태그에 value라는 어트리뷰트를 사용해서 값을 표시
- multiple 이라는 속성을 사용하면 여러 개의 옵션을 선택할 수 있음
- 사용자 입력을 받는 컴포넌트를 만들 때 사용함
📲 File input태그
- 디바이스의 저장 장치로부터 하나 또는 여러 개의 파일을 선택할 수 있게 해주는 HTML 태그
- 서버로 파일을 업로드하거나 자바스크립트의 File API를 사용해서 파일을 다룰 때 사용
<input type="file" />- 값이 읽기 전용이기 때문에 React에서는 uncontrolled 컴포넌트가 됨
- 값이 React의 통제를 받지 않음
📲 Multiple Inputs
- 여러 개의 state를 선언하여 각각의 입력에 대해 사용
- 클래스 컴포넌트에서는 setState 함수 하나로 모든 state의 값을 업데이트 했지만 함수 컴포넌트에서는 각 state의 변수마다 set 함수가 따로 존재하기 때문에 각각의 set 함수를 사용해서 구현
- 제어 컴포넌트에 value prop을 정해진 값으로 넣으면 코드를 수정하지 않는 한 입력 값을 바꿀 수 없음
- value prop은 넣되 자유롭게 입력할 수 있게 만들고 싶다면 값에 undefined 또는 null을 넣어주면 됨