텍스트 필드 값 컨트롤 하는 법

onChange함수의 활용

input창의 데이터 값을 받아 오고 싶을 때, onChange함수를 사용한다.

const handleInput = (e)=>{
	e.target.value
}
<input onChange={handlelInput}></input>

위와 같은 형식으로 보통 쓴다.

React에서 onChange함수의 활용

위 코드와 같이 발생하는 input value 를 저장? 담아둘 공간이 필요하다.
이때 useState 훅으로 담아서 사용한다.

const [change, setChange] = useState([])
const handleInput =(e)=>{
  setChagne(e.target.value)
}
return(
	<>
  <input onChange={handleInput}></input>
  </>
)
console.log(change) //입력된 값이 hyozzi라면 change=hyozzi

하지만 서버와 통신을 하기 위해선 객체 형태로 저장하는 것이 좋다.

const [change, setChange] = useState({
	id:'',
  	name:'',
})
const handleInput =(e)=>{
  const [name,value] = event.target;
  setChagne({...change,[name]:value});
}
return(
	<>
  <input name="id" onChange={handleInput}></input>// 입력 받은 값이 hyozzi 일때
  <input name="name" onChange={handleInput}></input>// 입력 받은 값이 김효성 일때
  </>
)
console.log(change)// {id : hyozzi, name:김효성}

구조분해할당을 활용해 값을 각각 나눠주고 [name]이라는 key값에 어떤 값이 들어가면 될지 정해주면 된다. ex) 위 input창의 name='id', name='name' 이런식

개인 프로젝트에서 장바구니를 구현해보다가 잘 기억이 안나서 정리를 해봤다. 굉장히 기초적인 것인데 안쓰다보니 까먹었다..ㅎ

이는 기초적인 문법이니 가급적이면 외워서 사용하겠다.