select 만들때 Array.from 메소드 사용하기
아래와 같은 select form을 만들었을 때 사용한 코드가 예전에는 몰랐던 코드라 블로그에 적어본다. 이렇게 하면
export default function Form(){
return <form className="add-form">
<h3>What do you need for your 😍trip?</h3>
<select>
{Array.from({length:20}, (_,i) => i + 1).map(num => <option value={num} key={num}>{num}</option>)}
</select>
</form>
}Array.from 메소드를 사용해 length가 20인 배열을 생성하는것을 볼 수 있다. Array.from의 첫 번째 인수는 원하는 배열의 길이를 설정하는 객체로 전달한다.
{length: 20}
두 번째 인수는 함수로 제공된다. 는 사용되지 않는 매개변수이고 i는 배열 요소의 인덱스를 나타낸다. 여기서는 value를 쓸 일이 없어서 _ 를 쓰는것으로 이해했다.
이렇게 생성된 배열에는 1~20의 숫자가 들어간다.
(_, i) => i + 1
그런 다음 map 메서드를 사용하여 각 숫자에 대해 option을 생성한다.
.map(num => <option value={num} key={num}>{num}</option>)
이렇게 생성된 option 요소들이 select 태그 안에 넣어지면, 저 첨부한 사진처럼 선택할 수 있게 된다.
react에서 form을 submit 하기
export default function Form(){
function handleSubmit(e){
e.preventDefault()
console.log("hello")
}
return <form className="add-form" onSubmit={handleSubmit}>
<h3>What do you need for your 😍trip?</h3>
<select>
{Array.from({length:20}, (_,i) => i + 1).map(num => <option value={num} key={num}>{num}</option>)}
</select>
<input type="text" placeholder="Item..." />
<button>Add</button>
</form>
}handleSubmit 함수를 정의한 후, form 태그에 onSubmit 이벤트 핸들러로 연결한다. 그러면 폼이 제출될 때마다 handleSubmit함수가 호출되게 되고, 이 함수내에서 자바스크립트와 같이 e.preventDefault()를 써줘서 새로 고침이 일어나지 않게 막아준다.
controlled element
그런데 여기서 controlled element라는 개념이 있다. 폼 요소(form elements)들은 기본적으로 자신의 상태(state)를 DOM에서 유지하는데 이렇게 되면 value를 읽기가 어려워 진다. 그렇기 때문에 리액트에서는 상태(state)를 직접 관리할 수 있도록 controlled element를 사용한다. 한국어로는 제어 컴포넌트라고 하나보다. 이렇게 하면 리액트가 입력(input),선택(select)등의 폼 요소들을 컨트롤 할 수 있다.
import { useState } from "react"
export default function Form(){
const [description,setDescription] = useState('')
const [quantity,setQuantity] = useState('1')
function handleSubmit(e){
e.preventDefault()
if(!description) return;
const newItem = {description, quantity, packed: false, id: Date.now()}
console.log(newItem);
setDescription('')
setQuantity(1)
}
return <form className="add-form" onSubmit={handleSubmit}>
<h3>What do you need for your 😍trip?</h3>
<select value={quantity} onChange={(e) => setQuantity(Number(e.target.value))}>
{Array.from({length:20}, (_,i) => i + 1).map(num => <option value={num} key={num}>{num}</option>)}
</select>
<input type="text" placeholder="Item..." value={description} onChange={(e) => setDescription(e.target.value)}/>
<button>Add</button>
</form>
}
controlled element 설정방법
- 제일 먼저 state를 지정해준다.
const [description,setDescription] = useState('')
const [quantity,setQuantity] = useState('1')- 컨트롤 하기를 원하는 element에 state를 이용한다.
- onChange 핸들러로 그 state를 업데이트 해준다.
<select value={quantity} onChange={(e) => setQuantity(Number(e.target.value))}>
{Array.from({length:20}, (_,i) => i + 1).map(num => <option value={num} key={num}>{num}</option>)}
</select><input type="text" placeholder="Item..." value={description} onChange={(e) => setDescription(e.target.value)}/>위의 두 코드들을 보면 value ={state 이름} 으로 지정해준것을 볼 수 있다.
그리고 onChange 핸들러로 업데이트를 해주는데 여기서는 사용자의 input을 데이터로 가지고 싶기 때문에 e.target.value로 써준다. select에 있는 onChange핸들러에 Number로 감싸준 이유는 default로 e.target.value는 string의 형태이기 때문에 숫자로 변경해준것이다. Quantity는 숫자의 형태이어야 하기 때문이다.
OnSubmit event를 handleSubmit function으로 사용함으로써, controlled input에 넣었던 value들에 접근할 수 있는것이다. 그래서 아래의 코드처럼 newItem이라는 object도 가져온 value 에 맞춰서 만들 수 있다.
const newItem = {description, quantity, packed: false, id: Date.now()}
참고로 이 코드는
setDescription('')
setQuantity(1)
form이 submit된 후에 다시 창들을 기본값으로 바꿔주는 역할을 해주기 위해 적은것이다.
