2023-02-04(state로그인구현)

import React, { useState } from 'react'

function App() {
	const[id, setId] = useState("")
	const[pw, setPw] = useState("*")
	const buttonHandler = () => alert({id})
	return (
		<>
			아이디 : {""}
			<input type = "text"
			value = {id}
			onChange={function(event) {
					//console.log("event",  event.target.value)
					setId(event.target.value)
			}} />
			<br />
			비밀번호 : {""}
			<input type= "password"
			alue = {pw}
			onChange={function(event) {
					//console.log("event", event.target.value)
					setPw(event.target.value)
			}} 
			/>
			<br />
			<button 
			onClick={buttonHandler}
			>
			로그인	
			</button>
		</>
	)
}

export default App

다른 방법

import React, { useState } from 'react'

function App() {
	const[id, setId] = useState("")
	const[pw, setPw] = useState("*")

	const handleChangeId = (event) => {
		setId(event.target.value)
  }
	const handleChangePw = (event) => {
		setPw(event.target.value)
	}
	//console.log("id", id)
	//console.log("pw", pw)
	

	return (
		<>
			아이디 : {""}
			<input type = "text" value = {id}	onChange={handleChangeId} />
			<br />
			비밀번호 : {""}
			<input type= "password" value = {pw} onChange={handleChangePw} />
			<br />
			<button 
			onClick={() =>{alert (`고객님이 입력하신 아이디는 ${id}이며, 비밀번호는${pw}입니다..`
			)
			setId("")
			setPw("")
			}}

			>
			로그인	
			</button>			
		</>
)};

export default App

1. id와 pw의 기본 골격을 만든다.

2. 둘다 input 안에 type를 정해줘야하는데 pw는 비밀번호가 보이면 안 되니까 type = "password"로 한다.

3. id 와 pw 두 가지를 state관리를 해야하기에 두가지 모두 만든다(둘다 변해야하기때문에)
   --> useState는 항상 import를 해 와야 되고, 초기값은 빈 값으로

4. value와 onchange는 항상 쌍으로 같이 다녀야하기에 둘 다 써준다.

5. 너무 줄이 길어지니까 return문 위인칸인 js칸에 함수를 하나씩 선언해준다. 그리고 그 변수만 {}에 담으면 끝나도록 모두 설정해준다.
   -> 이 변수에 있는 애가 타이핑이 일어날때마다 이벤트.타켓.value에 있는 값을 setId/setPw해주기로 했다.

6. 버튼을 누르면 모든 것이 초기화 되어야하는데 버튼이 기준이니까 여는 버튼 안에다 setId("") setPw("") 를 넣어주면 끝

=> 콘솔을 찍어보면 아이디와 패스워드가 입력할 때마다 바뀌는 걸 볼 수 있다.

input의value는 state이다(id이거나pw) 그래서 이 state를 초기화 시켜주면 input 테그 값도 초기화가 된다

🔔알게 된 점
초기화 작업을 할 때는 기준을 정확히 보고 그 밑에 ""을 주거나 한다.