πŸ“’TIL) React μ—¬λŸ¬ 인풋 νŽΈν•˜κ²Œ κ΄€λ¦¬ν•˜κΈ°

TaeYangΒ·2021λ…„ 10μ›” 31일
0

μ—¬λŸ¬ 인풋 κ΄€λ¦¬λž€?

큰 ν‹€λ‘œ 보게 되면 νšŒμ›κ°€μž… νŽ˜μ΄μ§€λΌλ˜κ°€ μ˜ˆμ•½ ν•˜λŠ” νŽ˜μ΄μ§€λ“€μ„ 보게 되면 μΈν’‹μ΄λ‚˜ 폼 처럼 값을 μž…λ ₯ν•˜λŠ” 창듀이 μ—„μ²­λ‚˜κ²Œ 많이 μžˆμŠ΅λ‹ˆλ‹€! κ·ΈλŸ΄λ•Œ 인풋을 κ΄€λ¦¬ν•˜κΈ°μ— μ–΄λ–€κ²Œ μ½”λ“œμ μœΌλ‘œ νš¨μœ¨μ μΌκΉŒμ— λŒ€ν•΄ μ–˜κΈ°λ₯Ό ν•΄λ³Όλ €κ³  ν•©λ‹ˆλ‹€!

State λ₯Ό ν•˜λ‚˜λ‘œ!

보톡 μ•„λž˜μ²˜λŸΌ stateλ₯Ό μ—¬λŸ¬κ°œλ₯Ό μ„ μ–Έν•΄ 값을 관리λ₯Ό ν•˜κ²Œ 될것이닀.

const [ id , setId] = useState('')
const [ pw , setPw] = useState('')
const [ email , setEmail] = useState('')

ν•˜μ§€λ§Œ 인풋을 관리해야할 stateκ°€ 더 λ§Žμ•„μ§€λ©΄ λ§Žμ•„μ§ˆμˆ˜λ‘ 일일히 선언을 ν•΄μ€˜μ•Όν•˜λŠ” λ²ˆκ±°λ‘œμ›€μ΄ μžˆλŠ”λ°
이거λ₯Ό ν•˜λ‚˜μ˜ state에 κ°μ²΄ν˜•μœΌλ‘œ μ €μž₯이 κ°€λŠ₯ν•˜λ‹€ μ˜ˆμ‹œλŠ” μ•„λž˜λ‘œ!

const [inputs, setInputs] = useState({
  id: '',
  pw: '',
  email: '',
 });

μ΄λŸ°μ‹μœΌλ‘œ inputsλΌλŠ” μŠ€ν…Œμ΄νŠΈ 값에 ν•˜λ‚˜λ‘œ λ‹΄μ•„μ„œ 관리λ₯΄ ν• μˆ˜ μžˆμŠ΅λ‹ˆλ‹€.

ν•¨μˆ˜λ„ ν•˜λ‚˜λ‘œ??

보톡 ν•¨μˆ˜λ„ μ•„λž˜μ²˜λŸΌ ν•˜λ‚˜μ”© λ‹€ 선언을 ν•΄μ„œ μ‚¬μš©ν–ˆμ„κ±°λ‹€.

const handleId = e => {
  setId(e);
};

const handlePw = e => {
  setPw(e);
};
const handleEmail = e => {
  setEmail(e);
};

ν•˜μ§€λ§Œ μ•„λž˜μ²˜λŸΌ nameκ³Ό valueλ₯Ό μ΄μš©ν•΄ ν•˜λ‚˜μ˜ ν•¨μˆ˜λ‘œ μ—¬λŸ¬ state λ₯Ό 컨트둀 κ°€λŠ₯ν•˜λ‹€!
μ»¨νŠΈλ‘€μ„ ν•˜κΈ°μœ„ν•΄μ„  인풋, 폼 μ—μ„œ name μ΄λΌλŠ” 속성을 λΆ€μ—¬ν•΄μ£Όμ–΄μ•Όν•œλ‹€.

<input type=text name=id onChange={handleInput}/>
<input type=text name=pw onChange={handleInput}/>
<input type=text name=email onChange={handleInput}/>
const handleInput = e => {
  const { value, name } = e.target;
  setInputs({
    ...inputs,
    [name]: value,
  });
};
profile
μŒμ•… 전곡 μ΄μ˜€λ˜ μ˜ˆλΉ„ ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžβ˜€οΈ

0개의 λŒ“κΈ€