๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • What would life be If we had no courage to attemp anything?
Language/JavaScript

[JavaScript] Event-onChange

by DevIseo 2023. 1. 22.

onChange?

  • ์ž‘์„ฑํ•œ JS๋ฅผ ํ†ตํ•ด ๋ณ€ํ™”๊ฐ€ ์ผ์–ด๋‚ฌ๋Š”์ง€ ๊ฐ์ง€
  • input ํƒœ๊ทธ์˜ ํฌ์ปค์Šค๋ฅผ ๋ฒ—์–ด๋‚ฌ์„๋•Œ (์ฆ‰, ์ž…๋ ฅ์ด ๋๋‚ฌ์„๋•Œ) ๋ฐœ์ƒ
    • cf.onInput()
      • input ํƒœ๊ทธ ์•ˆ์˜ ๊ฐ’๋“ค์ด ๋ณ€๊ฒฝ ๋ ๋•Œ๋งˆ๋‹ค ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒ
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="input" type="text" onchange="myFunction()">
</body>
<script>
    function myFunction(){
        let value = document.getElementById('input').value;
        console.log(value);
    }
</script>
</html>

React์—์„œ input์˜ onChange ํ•œ ๋ฒˆ์— ๊ด€๋ฆฌํ•˜๊ธฐ

  • ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€ ๊ตฌํ˜„์‹œ ์—ฌ๋Ÿฌ๊ฐœ์˜ input์„ ๊ด€๋ฆฌ
  • ์ด๋ฅผ ๋ชจ๋‘ ๋‹ค๋ฅธ state๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์€ ์ฝ”๋“œ๊ฐ€ ๋„ˆ๋ฌด ๋ณต์žกํ•ด์ง!
//๊ฐ๊ฐ์˜ state๋กœ ๊ด€๋ฆฌ ์‹œ
import React,{useState} from'react'
export default function App(){
	const [id,setId] = useState('')
	const [pw,setPw] = useState('')
	const [nickname,setNickname] = useState('')
	
	const [person,setPerson] = useState('')

	const handleIdChange = (e) => {
    setPerson({ ...person, id: e.target.value });
  };
	const handlePwChange = (e) => {
    setPerson({ ...person, pw: e.target.value });
  };
  const handleNicknameChange = (e) => {
    setPerson({ ...person, nickname: e.target.value });
  };

	return(
		<div className="App">
      <section>
        <div>
          <label>ID</label>
          <input
            value={id}
            onChange={handleIdChange}>  
          </input>
        </div>
        <div>
          <label>PW</label>
          <input
            value={pw}
            onChange={handlePwChange}>  
          </input>
        </div>
        <div>
          <label>Nickname</label>
          <input
            value={nickname}
            onChange={handleNicknameChange}>  
          </input>
        </div>
      </section>
    </div>
	)
}
  • ํ•˜๋‚˜์˜ state๋ฅผ ๊ฐ์ฒด๋กœ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋ฅผ ํ•ด๊ฒฐ
  • input๋งˆ๋‹ค ๊ฐ์ฒด์˜ property key์— ๋งž๋Š” name ํ”„๋กœํผํ‹ฐ๋ฅผ ๋„ฃ์–ด์ฃผ๊ณ , onChange์— ๋„˜๊ฒจ์ค„ ํ•จ์ˆ˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋ฒ”์šฉ์„ฑ์ด ์žˆ๋„๋ก ์ˆ˜์ •
import React,{useState} from'react'
export default function App(){
	const [person,setPerson] = useState({
		id:'',
		pw:'',
		nickname:''
	})

	const handleOnChange = (e) => {
    setPerson({ ...person, [e.target.name]: e.target.value });
  };

/*
//๋‹ค๋ฅธ ๋ฐฉ๋ฒ• - ๊ตฌ์กฐ๋ถ„ํ•ด ํ• ๋‹น ํ™œ์šฉ
	const {id,pw,nickname} = inputs
	cont handleOnChange = (e) => {
		const {value,name} = e.target
		setPerson({
			...person,
			[name]:value
		})
}
*/

	return(
        <div className="App">
          <section>
            <div>
              <label>ID</label>
              <input
                name="id"
                value={person.id}
                onChange={handleIdChange}>  
              </input>
            </div>
            <div>
              <label>PW</label>
              <input
                name="pw"
                value={person.pw}
                onChange={handlePwChange}>  
              </input>
            </div>
            <div>
              <label>Nickname</label>
              <input
                name="nickname"
                value={person.nickname}
                onChange={handleNicknameChange}>  
              </input>
            </div>
          </section>
        </div>
	)
}

Reference

useState๋ฅผ ์ด์šฉํ•œ ์—ฌ๋Ÿฌ ๊ฐœ์˜ input ์ƒํƒœ ๊ด€๋ฆฌ์™€ ๋ถˆ๋ณ€์„ฑ

React(๋ฆฌ์•กํŠธ): input ์ƒํƒœ ๊ด€๋ฆฌํ•˜๊ธฐ, input ์—ฌ๋Ÿฌ ๊ฐœ

[React] input ์ƒํƒœ ๊ด€๋ฆฌํ•˜๊ธฐ(useState / onChange ์ด์šฉ)

์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€

'Language > JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[JavaScript] async / await 2  (0) 2023.01.26
[JavaScript] async / await 1  (1) 2023.01.25
[JavaScript] Event-onFocus, onBlur  (0) 2023.01.20
[JavaScript] ๋น„๋™๊ธฐ  (0) 2023.01.17
[JavaScript] API  (0) 2023.01.16

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”