function LoginMingi() {
const [idValue, setIdValue] = useState("");
function handleIdInput(e) {
setIdValue(e.target.value);
}
const [pwValue, setPwValue] = useState("");
const handlePwInput = (e) => setPwValue(e.target.value);
전체 코드는 아니지만 해당 부분을 코드로 작성하면서 useState를 사용하는 법과
state의 개념에 대해 조금씩 익숙해 질 수 있었다.
<button disabled={confirmCondition} id="button">
로그인
</button>
// 논리 연산자를 활용해서 true/false를 반환하게해서 버튼의 활성화 기능이 작동하게 했다.
const confirmCondition =
!idValue.includes("@") ||
!(pwValue.length >= 8 && pwValue.includes("!", "@", "#", "$"));
// 초기 state 값을 객체로 4개의 값을 담았다.
const [okColor, setOkColor] = useState({
idBorderColor: "#dedede",
idBackgroundColor: "hsl(0deg 0% 97%)",
pwBorderColor: "#dedede",
pwBackgroundColor: "hsl(0deg 0% 97%)",
});
여기서 기존의 state값을 변경 시키기 위한 방법을 위해 열심히 검색을 했다!
id와 pw의 color들이 한 객체에 묶여있기때문에 내가 원하는 값들만 변경해주고 싶었다.
검색끝에 찾은 방법은 아래와 같다.
setOkColor((prevState) => ({
...prevState,
idBorderColor: "lightgreen",
idBackgroundColor: "#90ee9098",
}));
기존의 state값을 prevState라 하고 그 값들을 그대로 가지고온 다름에
추가하고 싶은 값들을 추가하는것이다. 여기서는 변경된다고 할 수 있겠다.
const Condition = () => {
// 아이디 인풋박스의 조건
if (idValue.includes("@")) {
setOkColor((prevState) => ({
...prevState,
idBorderColor: "lightgreen",
idBackgroundColor: "#90ee9098",
}));
} else if (!idValue.includes("@")) {
setOkColor((prevState) => ({
...prevState,
idBorderColor: "#dedede",
idBackgroundColor: "hsl(0deg 0% 97%)",
}));
}
// 패스워드 인풋박스의 조건
if (pwValue.length >= 8 && pwValue.includes("!", "@", "#", "$")) {
setOkColor((prevState) => ({
...prevState,
pwBorderColor: "lightgreen",
pwBackgroundColor: "#90ee9098",
}));
} else if (!(pwValue.length >= 8 && pwValue.includes("!", "@", "#", "$"))) {
setOkColor((prevState) => ({
...prevState,
pwBorderColor: "#dedede",
pwBackgroundColor: "hsl(0deg 0% 97%)",
}));
-------------------------------------------
<input
className="innerBox"
onChange={handleIdInput}
onKeyUp={Condition}
value={idValue}
style={{
borderColor: okColor.idBorderColor,
backgroundColor: okColor.idBackgroundColor,
}}
id="id"
type="text"
placeholder="전화번호,사용자 이름 또는 이메일"
/>
<input
className="innerBox"
onChange={handlePwInput}
onKeyUp={Condition}
value={pwValue}
style={{
borderColor: okColor.pwBorderColor,
backgroundColor: okColor.pwBackgroundColor,
}}
id="password"
type={pwShow.type}
placeholder="비밀번호"
/>
위와 같은 함수로 아이디와 패스워드 입력란이 조건 만족시 초록색으로 다시 불만족시 원래 색으로 돌아가도록
코드를 작성해 보았다.
const [pwShow, setPwShow] = useState({ type: "password", text: "show" });
show 버튼을 누르면 input type이 text로 변해서 비밀번호가 보이게, 그리고 show 버튼이 hide 버튼이 되게
총 2개의 값을 객체로 하는 state를 초기 값으로 설정했다.
<button className="typeChangeBtn" onClick={pwShowCtl}>
{pwShow.text}
</button>
// 버튼 클릭시 pwShowCtl 함수 실행
const pwShowCtl = (e) => {
if (pwShow.text === "show") {
e.preventDefault();
setPwShow((prevState) => ({
...prevState,
type: "text",
text: "hide",
}));
} else {
e.preventDefault();
setPwShow({ type: "password", text: "show" });
}
};
여기서는 값이 show 아니면 hide 이기때문에 굳이 prevState 값을 통해서 state 값을 바꿔주지 않아도 되지만
그냥 한번 연습삼아 다시 코드를 작성해보았다.