기본 useState 문법
import React, { useState } from "react";- useState를 react로부터 import해준다.
const [email, setEmail] = useState("");- 원하는 변수, 값을 useState로 선언해준다.
여기서 setNum은 num을 어떤식으로 변화시키고 담아줄지를 담당하는 함수이며 useState의 ()안에 들어가는 값은 선언한 변수의 초기값을 지정해주는 부분이다. 어떠한 값도 상관 없기 때문에 배열을 원한다면 [], 객체를 원한다면 {}, 문자열을 원한다면 "" 등 지정해줄 수 있다. 받으려는 데이터가 어떤 것일지 코드만 봐서도 알 수 있도록 비어있는 값이라 할 지라도 넣어주는 것이 좋다.
state는 실시간으로 변하는 값을 그 부분만 랜더링 시켜주어 ui에 반영해줄 수 있다.
사용자가 입력하는 값, 번호나 텍스트 등을 db에 보내주기 위해서는 실시간으로 변화하는 값을 인식시키고 저장하는 과정이 필요한데 이때 useState를 활용한다.
state의 기본 개념을 그렇게 어렵지 않으나 이제 활용을 어떻게 할 것인지에 대한 고민이 필요한 것 같다.
처음에는 set함수를 정의하지 않아서 자꾸 에러코드를 마주했고..ㅠ
변수를 어디에 어떻게 써야할지 골머리를 썩어서 굉장히 고생을 많이 했다. state로 할 건지 안 할 건지 굳이 필요없는 부분에 사용해서 코드가 복잡해지는 경우도 굉장히 많았다.
내가 가장 고생했던 부분은 onChange와 onClick에 event를 발생했을 때 변수에 변화를 주어야하는 경우였다.
지금까지 여전히 고생하고 하고 있는 것을 보면 앞으로도 많을 것 같다...
여기서 onChange라는 함수는 그냥 변화가 있으면 event라는 명령어로 그 변화를 가져올 수 있다는 부분이 가장 헷갈렸고 드디어 이해를 한 것이다..
const handleEmail=(e)=>{setEmail(e.target.value)}
return(
<input type="email" onChange=(handleEmail)/>
)예를 들어 input box에 값이 입력이 된다면 onChange에 event가 발생하면 onChange가 실행-> handleemail 함수가 실행되고 onChange에 발생한 event를 인자로 받아서 setemail이 실행되는 순서다.
e.target.value는 event가 발생한 target 여기서는 텍스트가 입력된 input이 될 것이며 그 input값의 value를 가져와 달라는 의미다.
그리고 그 값을 email로 선언한 state에 실시간으로 저장할 수 있다!
console.log(email)한 글자 한 글자 늘어날 때마다 실시간으로 email의 값이 변화하여 저장되는 것을 console로 확인할 수 있다.
event값을 못찾겠다는 엄청난 오류를 마주하며 왜 못찾는지 이해하지 못했는데...
그건 handleEmail 함수에 인자를 event로 안넣어줬기 때문에 아무리 event.target.value를 set함수에 담아도 인지를 하지 않았던 것이었다...
const handleEmail=(e)=>{}
함수 안에서 event를 사용하고 싶다면 꼭 함수 안에 event 인자로 넣어주는 것을 잊지말자.
