[TIL] 0619 | React with Redux, Next.js, TypeScript

ichbinmin2Β·2022λ…„ 6μ›” 19일
0

TIL

λͺ©λ‘ 보기
11/22
post-thumbnail

λͺ©μ°¨

  • κΈ°λ³Έ 검증 μΆ”κ°€ν•˜κΈ°
  • 검증 ν”Όλ“œλ°± μ œκ³΅ν•˜κΈ°
  • was touched State μ²˜λ¦¬ν•˜κΈ°

✧ κΈ°λ³Έ 검증 μΆ”κ°€ν•˜κΈ°

  • 이제 폼의 μž…λ ₯ 값에 λŒ€ν•œ μœ νš¨μ„± 검증을 μΆ”κ°€ν•˜κ³ μž ν•œλ‹€. 예λ₯Ό λ“€μžλ©΄, μž…λ ₯ λž€μ΄ λΉ„μ–΄μžˆμ„ λ•Œ 폼을 μ œμΆœν•˜μ§€ λͺ»ν•˜λ„둝 ν•˜λŠ” 식이닀. μ§€κΈˆκΉŒμ§€λŠ” μ½˜μ†” 좜λ ₯만 될 뿐이지 λ§Žμ€ κ²½μš°μ—λŠ” 빈 데이터λ₯Ό μ„œλ²„λ‘œ μ „μ†‘ν•˜κ²Œ λœλ‹€. 그리고 빈 데이터λ₯Ό ꡳ이 μ„œλ²„λ‘œ 전솑할 ν•„μš”λŠ” 없을 것이닀.

μœ νš¨μ„± κ²€μ‚¬λŠ” λ³΄μ•ˆ λ©”μ»€λ‹ˆμ¦˜μ΄ μ•„λ‹ˆλ‹€

  • μ‹€μ œ μ›Ήμ‚¬μ΄νŠΈ, μ›Ή μ•±μ—μ„œ μ΄λ ‡κ²Œ λΈŒλΌμš°μ €μ—μ„œ μ‚¬μš©μž μž…λ ₯ κ°’μ˜ μœ νš¨μ„±μ„ κ²€μ¦ν•˜λŠ” 방식은 μ‚¬μš©μž κ²½ν—˜ μΈ‘λ©΄μ—μ„œ λΉ λ₯Έ ν”Όλ“œλ°±μ΄ κ°€λŠ₯ν•˜λ―€λ‘œ ꡉμž₯히 쒋은 방식이닀. ν•˜μ§€λ§Œ 이런 μž…λ ₯ 값듀은 μ„œλ²„μ—μ„œλ„ 검증이 λ˜μ–΄μ•Ό ν•˜λŠ”λ°, κ·Έ μ΄μœ λŠ” λΈŒλΌμš°μ €μ— μžˆλŠ” μ½”λ“œλŠ” μ‚¬μš©μžμ— μ˜ν•΄ μ–Όλ§ˆλ“ μ§€ νŽΈμ§‘λ  κ°€λŠ₯성이 있기 λ•Œλ¬Έμ΄λ‹€. λ”°λΌμ„œ 이런 μœ νš¨μ„± κ²€μ‚¬λŠ” μ‚¬μš©μž κ²½ν—˜μ„ μœ„ν•œ μž₯치일 뿐이며, λ³΄μ•ˆ λ©”μ»€λ‹ˆμ¦˜μ΄ μ•„λ‹˜μ„ λͺ…심해야 ν•œλ‹€.

μ‚¬μš©μž μž…λ ₯λž€μ΄ κ³΅λž€μΌ λ•Œ μΆ”κ°€ν•  수 μžˆλŠ” μœ νš¨μ„± 검사

  • μ–΄λ–»κ²Œ ν•΄μ•Ό μ‚¬μš©μž μž…λ ₯λž€μ΄ λΉ„μ–΄μžˆλŠ” μ±„λ‘œ 폼을 μ œμΆœν–ˆμ„ λ•Œ μ½˜μ†”μ— 좜λ ₯ν•˜μ§€ μ•Šκ³  μ—λŸ¬λ₯Ό λ„μšΈ 수 μžˆμ„κΉŒ?
const formSubmitssionHandler = (event) => {
  event.preventDefault();

  if (enteredName.trim() === "") {
  }

  console.log("useState :", enteredName);
};
  • 폼을 μ œμΆœν•˜λŠ” 트리거 ν•¨μˆ˜μΈ formSubmitssionHandler μ•ˆμ—μ„œ if 문을 μΆ”κ°€ν•˜κ³ , μ‚¬μš©μž μž…λ ₯ 값을 μƒνƒœ(state)둜 관리해주고 μžˆλŠ” enteredName에 trim()을 μ‚¬μš©ν•΄μ„œ 곡백을 μ—†μ•€ μƒνƒœκ°€ λΉ„μ–΄μžˆμ„ λ•Œλ₯Ό κ°€μ •ν•΄λ³΄μž.

    μ΄λ•Œ μœ νš¨μ„± 검증에 μ‚¬μš©λ˜λŠ” 쑰건듀은 μ–΄λ–€ μž…λ ₯ 값을 λ°›λŠλƒμ— λ‹¬λΌμ§ˆ 것이닀. λ‹¨μˆœνžˆ 이름이라면 μž…λ ₯λž€μ΄ λΉ„μ–΄μžˆλŠ”μ§€λ§Œ ν™•μΈν•˜λ©΄ 될 것이고, 이메일 μ£Όμ†ŒλΌλ©΄ μœ νš¨ν•œ 이메일 μ£Όμ†ŒμΈμ§€ 검증해야 ν•  것이닀.

const formSubmitssionHandler = (event) => {
  event.preventDefault();

  if (enteredName.trim() === "") {
    return;
  }

  console.log("useState :", enteredName);
};
  • 그리고 λ§Œμ•½ enteredName이 λΉ„μ–΄μžˆλ‹€λ©΄, ν•΄λ‹Ή μ½”λ“œμ˜ λ‹€μŒμœΌλ‘œ μ§„ν–‰λ˜μ§€ μ•Šλ„λ‘ return 을 ν•΄μ€€λ‹€. μ΄λ ‡κ²Œ ν•˜λŠ” μ΄μœ λŠ” μž…λ ₯된 값을 μ‚¬μš©ν•΄μ„œ 무언가λ₯Ό ν•΄μ•Ό ν•˜λŠ”λ°, 값이 λΉ„μ–΄μžˆλ‹€λ©΄ μ΄ν›„μ˜ μž‘μ—…λ“€μ„ ν•  ν•„μš”λ„ μ—†κΈ° λ•Œλ¬Έμ΄λ‹€. μ§€κΈˆμ˜ 경우라면 μž…λ ₯된 값이 λΉ„μ–΄μžˆλ‹€λ©΄ μ½˜μ†”μ— ν•΄λ‹Ή enteredName을 좜λ ₯λ˜μ§€ μ•Šμ„ 것이닀.

  • μ €μž₯ν•˜κ³  μ΄ˆκΈ°ν™” ν•œ λ’€, μž…λ ₯창이 λΉ„μ–΄μžˆλŠ” μ±„λ‘œ μ œμΆœμ„ 해도 μ½˜μ†” 창에 κ·Έ μ–΄λ–€ 것도 좜λ ₯λ˜μ§€ μ•ŠλŠ” κ±Έ λ³Ό 수 μžˆλ‹€. 반면, μž…λ ₯창에 무언가λ₯Ό μž…λ ₯ν•˜κ³  μ œμΆœμ„ ν•˜λ©΄ μ½˜μ†” 창에 μž…λ ₯ν•œ 값이 κ·ΈλŒ€λ‘œ 좜λ ₯되고 μžˆλ‹€.

✧ 검증 ν”Όλ“œλ°± μ œκ³΅ν•˜κΈ°

  • 기본적인 μœ νš¨μ„± 검증을 μœ„ν•΄μ„œ 더 λ§Žμ€ μƒνƒœ(state)듀을 μΆ”κ°€ν•  수 μžˆλ‹€.
const [enteredNameIsValid, setEnteredNameIsValie] = useState(true);
  • enteredNameIsValidλŠ” boolean 으둜 μ²˜λ¦¬λ˜λŠ” enteredName의 μœ νš¨μ„±μ˜ μƒνƒœλ₯Ό κ΄€λ¦¬ν•΄μ£ΌλŠ” μƒνƒœ(stete)κ°€ 될 것이닀.
const formSubmitssionHandler = (event) => {
  event.preventDefault();

  if (enteredName.trim() === "") {
    setEnteredNameIsValie(false);
    return;
  }

  setEnteredNameIsValie(true);
  console.log("useState :", enteredName);

  setEnteredName("");
};
  • 그리고 기쑴에 μž‘μ„±ν•œ μœ νš¨μ„±μ„ νŒλ‹¨ν•˜λŠ” if λ¬Έ 내뢀에 return ν•˜μ—¬ ν•΄λ‹Ή ν•¨μˆ˜κ°€ μ’…λ£Œλ˜κΈ° 전에 setEnteredNameIsValidλ₯Ό false둜 μ—…λ°μ΄νŠΈ ν•΄μ£Όκ³ , μœ νš¨μ„± 검사가 true κ°€ λ˜μ—ˆμ„ λ•ŒλŠ” setEnteredNameIsValidλ₯Ό true둜 μ—…λ°μ΄νŠΈ ν•΄μ€€λ‹€.
<input
  ref={nameInputRef}
  type="text"
  id="name"
  onChange={nameInputChangeHandler}
  value={enteredName}
/>;
{
  !enteredNameIsValid && <p className="error-text">Name must not be empty.</p>;
}
  • 그리고 input μ°½ μ•„λž˜μ— {}λ₯Ό μΆ”κ°€ν•˜κ³ , enteredNameIsValidκ°€ false 일 λ•Œ μ–΄λ–€ κ²½κ³  메세지λ₯Ό λ„μšΈ 수 μžˆλ„λ‘ <p> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ λ§ˆν¬μ—…μ„ μž‘μ„±ν•΄μ€€λ‹€.
<div className="form-control">
  <label htmlFor="name">Your Name</label>
  <input
    ref={nameInputRef}
    type="text"
    id="name"
    onChange={nameInputChangeHandler}
    value={enteredName}
  />

  {!enteredNameIsValid && <p className="error-text">Name must not be empty.</p>}
</div>
  • 빈 κ°’μœΌλ‘œ μ œμΆœν•˜λ©΄ input 창이 λΉ¨κ°„μƒ‰μœΌλ‘œ μŠ€νƒ€μΌλ§λ˜μ–΄ μ‚¬μš©μžμ—κ²Œ ν™•λ³΄ν•˜κΈ° μ‰¬μš΄ κ²½κ³ λ₯Ό 보여주도둝 <div> νƒœκ·Έμ˜ className 을 λ³€μˆ˜λ‘œ μž‘μ„±ν•΄μ€€λ‹€.
const nameInputClasses = enteredNameIsValid
  ? "form-control"
  : "form-control invalid";

return (
  <form onSubmit={formSubmitssionHandler}>
    <div className={nameInputClasses}>...</div>
  </form>
);
  • 이λ₯Ό μ €μž₯ν•˜κ³  확인해보면, μž…λ ₯창이 λΉ„μ–΄μžˆλŠ” μ±„λ‘œ 폼을 μ œμΆœν–ˆμ„ λ•Œ input 창의 μ»¬λŸ¬κ°€ λ³€ν•˜κ³ , μ•„λž˜μ— κ²½κ³  메세지도 ν•¨κ»˜ 좜λ ₯λ˜λŠ” κ±Έ μ•Œ 수 μžˆλ‹€.


✧ was touched State μ²˜λ¦¬ν•˜κΈ°

  • μ§€κΈˆκΉŒμ§€ μš°λ¦¬κ°€ μΆ”κ°€ν•œ μœ νš¨μ„± 검증 λ°©μ‹μ—λŠ” 단점이 ν•˜λ‚˜ μžˆλ‹€.
const [enteredNameIsValid, setEnteredNameIsValie] = useState(true);
  • 이 enteredNameIsValidλΌλŠ” μƒνƒœ(state)λŠ” 초기 κ°’μ˜ true 둜, μ²˜μŒμ— μž…λ ₯을 μœ νš¨ν•˜λ‹€κ³  μ·¨κΈ‰ν•œλ‹€λŠ” 의미이며 μœ νš¨ν•˜μ§€ μ•ŠμœΌλ©΄ false둜 λ³€ν•˜λ„λ‘ ν–ˆλ‹€. μ΄λŠ” 단지 μœ νš¨μ„± κ²€μ‚¬μ—μ„œ μš°λ¦¬κ°€ μ„€μ •ν•œ μ—λŸ¬λ₯Ό μ΄ˆλ°˜μ— λ„μš°μ§€ μ•ŠκΈ° μœ„ν•œ λͺ©μ μœΌλ‘œ μ„€μ •λœ 것이며, 일쒅에 μ†μž„μˆ˜μ— 더 가깝닀. 그리고 이 enteredNameIsValid μƒνƒœ 값은 μœ νš¨μ„±μ„ 좜λ ₯ν•  λ•Œλ₯Ό μ œμ™Έν•˜κ³ λŠ” 사싀 ν•„μš”ν•˜μ§€ μ•ŠκΈ°μ— λͺ©μ μ—λ§Œ λΆ€ν•©ν•˜λ˜ λΆ€μ •ν™•ν•œ λ°©μ‹μœΌλ‘œ 처리λ₯Ό ν•΄μ£Όμ—ˆλ‹€. 그리고 μ΄λŠ” μ–΄λ–€ 문제λ₯Ό μΌμœΌν‚¬ κ°€λŠ₯성을 λ‚΄ν¬ν•˜κ³  μžˆλ‹€λŠ” λœ»μ΄λ‹€.

enteredNameIsValid의 μƒνƒœ 값이 λ¬Έμ œκ°€ λ˜λŠ” 이유

const [enteredNameIsValid, setEnteredNameIsValie] = useState(true);
  • 이 μƒνƒœ(state) 값이 μ™œ λ¬Έμ œκ°€ λ˜λŠ”μ§€ μ˜ˆμ‹œλ₯Ό λ“€μ–΄λ³΄μž.
useEffect(() => {
  if (enteredNameIsValid) {
    // true 일 λ•Œ
    console.log("Name Input Is valid!"); // μ½˜μ†”μ— 좜λ ₯ν•œλ‹€
  }
}, [enteredNameIsValid]);
  • μ—¬κΈ°μ—μ„œ useEffectλ₯Ό 톡해 enteredNameIsValidκ°€ true 일 λ•Œλ§ˆλ‹€ μ‹€μ œ μ•±μ˜ μ½˜μ†” μ°½μ—μ„œ μ–΄λ–€ ν…μŠ€νŠΈλ₯Ό 좜λ ₯ν•˜λ„λ‘ ν•΄λ³΄μž.

  • μ €μž₯ν•˜κ³  μ½˜μ†”μ°½μ„ 확인해보면, κ·Έ μ–΄λ–€ 것도 μ‹€ν–‰λ˜μ§€ μ•Šμ€ μƒνƒœμž„μ—λ„ λΆˆκ΅¬ν•˜κ³  μ²˜μŒλΆ€ν„° μš°λ¦¬κ°€ μž…λ ₯ν•œ "Name Input Is valid!" ν…μŠ€νŠΈκ°€ 좜λ ₯되고 μžˆμŒμ„ μ•Œ 수 μžˆλ‹€. μ•žμ„œ μ„€λͺ…ν•œλŒ€λ‘œ enteredNameIsValid μƒνƒœλ₯Ό true둜 약간은 λΆ€μ •ν™•ν•˜κ²Œ μ„€μ •ν–ˆκΈ° λ•Œλ¬Έμ— λ°œμƒν•˜λŠ” 문제인데, μ΄λŠ” μ‹œμž‘ν•  λ•Œ 이 값이 μœ νš¨ν•˜λ‹€λŠ” 뜻이 μ•„λ‹ˆλ©°, λ‹€λ§Œ μ˜³μ§€ μ•Šμ€ κ²ƒμ΄λΌλŠ” 이야기닀. 그리고 μ΄λŠ” 단지 μ—λŸ¬μ— λŒ€ν•œ ν”Όλ“œλ°±μ„ μ£ΌκΈ° μœ„ν•œ μž„μ‹œλ°©νŽΈμΌ 뿐이닀. λ§Œμ•½ useEffectκ°€ μ—†μ—ˆλ‹€λ©΄ μ΄λ ‡κ²Œ νŽΈλ²•μ„ μ΄μš©ν–ˆλ”λΌλ„ μ‹€μ§ˆμ μΈ 손해가 μ—†μœΌλ‹ˆ λ§Œμ‘±ν• μ§€ λͺ¨λ₯Έλ‹€. ν•˜μ§€λ§Œ κ·Έλ ‡λ‹€κ³  ν•˜λ”λΌλ„ 이 μ½”λ“œκ°€ 쒋은 μ½”λ“œλΌλŠ” μ˜λ―ΈλŠ” 아닐 것이닀.
const [enteredNameIsValid, setEnteredNameIsValie] = useState(false);
  • enteredNameIsValid κ°€ μ²˜μŒλΆ€ν„° true μΌλ¦¬λŠ” μ—†κΈ° λ•Œλ¬Έμ΄λ‹€. 였히렀 이 μƒνƒœ(state)의 초기 값은 false μ—¬μ•Ό 더 μžμ—°μŠ€λŸ¬μ›Œ 보인닀. λ”°λΌμ„œ μš°λ¦¬λŠ” μ„Έ 번째 μƒνƒœ(state)λ₯Ό μΆ”κ°€ν•˜κ³ μž ν•œλ‹€.

μ„Έ 번째 μƒνƒœ(state) κ°’ μΆ”κ°€ν•˜κΈ°

const [enteredNameTouched, setEnteredNameTouched] = useState(false);
  • enteredNameTouched μƒνƒœλŠ” 기본적으둜 μ‚¬μš©μžκ°€ μž…λ ₯ 창에 μž…λ ₯ν•΄μ„œ enteredName이 μžˆλŠ”μ§€λ₯Ό ν™•μΈν•˜κΈ° μœ„ν•œ λͺ©μ μœΌλ‘œ μΆ”κ°€ν•˜μ˜€λ‹€. 그리고 이 κ°’μ˜ 초기 값은 μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ μ‹œμž‘λμ„ μ¦‰μ‹œ μ‚¬μš©μžκ°€ μž…λ ₯창을 κ±΄λ“œλ¦¬μ§€ μ•Šμ•˜μ„ 것이기 λ•Œλ¬Έμ— false 둜 μ§€μ •ν•œλ‹€.

enteredNameIsValid와 enteredNameTouchedλ₯Ό μ‘°ν•©ν•˜μ—¬ μœ νš¨μ„± 검증 μ½”λ“œ μ—…λ°μ΄νŠΈ ν•˜κΈ°

  • λ¨Όμ € enteredNameIsValid와 enteredNameTouchedλ₯Ό μ‘°ν•©ν•˜μ—¬ μ—λŸ¬ 메세지λ₯Ό 좜λ ₯ν•˜λŠ” λͺ©μ μœΌλ‘œ μ‚¬μš©ν•˜κ³ , 이λ₯Ό ν†΅ν•΄μ„œ invalid 클래슀λ₯Ό 더해쀄 수 μžˆλ„λ‘ ν•œλ‹€. 이제 enteredNameTouched μƒνƒœλ₯Ό ν†΅ν•΄μ„œ μž…λ ₯ 값이 μœ νš¨ν•œμ§€λ₯Ό 체크함과 λ™μ‹œμ— μ‚¬μš©μžκ°€ μž…λ ₯ 창을 κ±΄λ“œλ ΈλŠ”μ§€μ— λŒ€ν•œ 여뢀도 체크할 수 있기 λ•Œλ¬Έμ΄λ‹€. 그리고 λ§Œμ•½ μ‚¬μš©μžκ°€ μž…λ ₯창을 κ±΄λ“œλ¦΄ 기회쑰차 μ—†μ—ˆλ‹€λ©΄, μ—λŸ¬ 메세지λ₯Ό λ„μšΈ μ΄μœ κ°€ 없을 것이닀.
const nameInputIsInvalid = !enteredNameIsValid && enteredNameTouched;
  • 이 λ‘κ°€μ§€μ˜ μƒνƒœ(state)λ₯Ό μ‘°ν•©ν•΄μ„œ μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œ μƒμˆ˜ nameInputIsInvalidλ₯Ό μΆ”κ°€ν•˜κ³ , enteredNameIsValidλŠ” false 이고, enteredNameTouchedλŠ” true 일 λ•Œ true 값이 될 수 μžˆλ„λ‘ μž‘μ„±ν•œλ‹€. μ‚¬μš©μžκ°€ μž…λ ₯창을 κ±΄λ“œλ¦¬κΈ° μ‹œμž‘ν•˜λ©΄μ„œ 값이 μœ νš¨ν•˜μ§€ μ•Šμ„ λ•Œλ§Œ μœ νš¨μ„± 검증을 ν•˜κΈ° μœ„ν•΄μ„œλ‹€.
{
  !enteredNameIsValid && <p className="error-text">Name must not be empty.</p>;
}
  • μš°λ¦¬κ°€ !enteredNameIsValid μƒνƒœμ™€ &&을 ν†΅ν•΄μ„œ μ—λŸ¬ 메세지λ₯Ό λ„μš°λ„λ‘ μ„€μ •ν•˜μ˜€λŠ”λ°, 이제 nameInputIsInvalid 으둜 쑰건문을 λŒ€μ²΄ν•΄μ€„ 수 있게 λ˜μ—ˆλ‹€.
{
  nameInputIsInvalid && <p className="error-text">Name must not be empty.</p>;
}
  • nameInputIsInvalid 일 λ•Œλ§Œ μ—λŸ¬ 메세지λ₯Ό λ„μš°λ„λ‘ 쑰건문을 μž‘μ„±ν•œλ‹€. nameInputIsInvalid μƒμˆ˜λŠ” μš°λ¦¬κ°€ μœ„μ—μ„œ μž‘μ„±ν•œ κ²ƒμ²˜λŸΌ enteredNameIsValidλŠ” false μ΄λ©΄μ„œ λ™μ‹œμ— enteredNameTouchedλŠ” true 일 λ•Œλ₯Ό μ˜λ―Έν•  것이닀.
const nameInputClasses = enteredNameIsValid // true 이면,
  ? "form-control"
  : "form-control invalid"; // κ²½κ³  css
  • 그리고 enteredNameIsValid μƒνƒœλ₯Ό μ΄μš©ν•΄μ„œ 클래슀λͺ…을 쑰건문으둜 ν• λ‹Ήν•œ 것 μ—­μ‹œ nameInputIsInvalid으둜 μˆ˜μ •ν•΄μ€€λ‹€.
const nameInputClasses = nameInputIsInvalid // true 이면,
  ? "form-control invalid" // κ²½κ³  css
  : "form-control";
  • μ—¬κΈ°μ„œ μ£Όμ˜ν•  점은, nameInputIsInvalidκ°€ true 일 λ•ŒλŠ” μœ νš¨μ„± κ²€μ¦μ—μ„œ false λΌλŠ” λœ»μ΄λ―€λ‘œ invalid 클래슀 λͺ…을 nameInputIsInvalidκ°€ true 일 λ•Œ κ°€μ Έκ°ˆ 수 μžˆλ„λ‘ μˆ˜μ •ν•΄μ•Όν•œλ‹€λŠ” 것이닀.

  • μ €μž₯ν•˜κ³  μƒˆλ‘œκ³ μΉ¨ 해보면 enteredNameIsValid의 μ΄ˆκΈ°κ°’μ„ false둜 μ„€μ •ν•΄λ‘μ—ˆμŒμ—λ„ μ²˜μŒμ— μ—λŸ¬ 메세지가 좜λ ₯λ˜μ§€ μ•ŠμœΌλ©΄μ„œ μ½˜μ†”μ—λ„ μ•„λ¬΄λŸ° 메세지가 좜λ ₯λ˜μ§€ μ•ŠλŠ” κ±Έ μ•Œ 수 μžˆλ‹€. ν•˜μ§€λ§Œ λ¬Έμ œλŠ” Submit λ²„νŠΌμ„ 클릭해도 μ΄μ „μ²˜λŸΌ μ•„λ¬΄λŸ° λ³€ν™”κ°€ μΌμ–΄λ‚˜μ§€ μ•ŠλŠ”λ‹€. μ™œ 일까?

enteredNameTouched μƒνƒœ μ—…λ°μ΄νŠΈν•˜κΈ°

  • Submit λ²„νŠΌμ„ λˆŒλŸ¬λ„ κ·ΈλŒ€λ‘œμΈ μ΄μœ λŠ” enteredNameTouched μƒνƒœλ₯Ό μ—…λ°μ΄νŠΈν•œ 적이 μ—†κΈ° λ•Œλ¬Έμ΄λ‹€. λ¬Όλ‘  이 뢀뢄을 μ–΄λ–»κ²Œ ν• μ§€λŠ” 각자의 선택에 λ‹¬λ €μžˆλ‹€. λ§Œμ•½ 폼이 제좜 λ˜μ—ˆλ‹€λ©΄ λ‹Ήμ—°νžˆ enteredNameTouchedλŠ” μ—…λ°μ΄νŠΈ λ˜μ–΄μ•Ό ν•œλ‹€. 폼이 제좜된 μƒνƒœλΌλ©΄ μ‚¬μš©μžκ°€ μ•„λ¬΄λŸ° ν…μŠ€νŠΈλ„ μž…λ ₯ν•˜μ§€ μ•Šμ•˜λ”λΌλ„ 전체 폼을 μ œμΆœν•œ 것이고 μ΄λŠ” μ‚¬μš©μžκ°€ 전체 폼을 ν™•μΈν–ˆλ‹€λŠ” μ˜λ―Έμ΄κΈ°λ„ ν•˜κΈ° λ•Œλ¬Έμ— λͺ¨λ“  μž…λ ₯창은 μ‚¬μš©μžκ°€ κ±΄λ“œλ ΈμŒμ„ μ „μ œλ‘œ 여겨져야 할지도 λͺ¨λ₯Έλ‹€. λ”°λΌμ„œ 이런 κ²½μš°μ—λŠ” μ‚¬μš©μžκ°€ λͺ¨λ“  μž…λ ₯창을 κ±΄λ“œλ¦° 것을 μ „μ œλ‘œ enteredNameTouched을 μ—…λ°μ΄νŠΈ ν•˜κ³ μž ν•œλ‹€.
const formSubmitssionHandler = (event) => {
  event.preventDefault();

  if (enteredName.trim() === "") {
    setEnteredNameIsValie(false);
    return;
  }

  setEnteredNameIsValie(true);
  setEnteredName("");
};
  • μš°λ¦¬κ°€ enteredName와 if 문을 ν†΅ν•΄μ„œ μœ νš¨μ„±μ„ κ²€μ¦ν•˜κΈ° 전에 폼이 제좜된 κ·Έ μˆœκ°„ setEnteredNameTouched을 μ—…λ°μ΄νŠΈν•˜λ„λ‘ ν•΄μ•Ό ν•œλ‹€. μ™œλƒν•˜λ©΄ μ—¬κΈ°μ„œ 폼이 μ œμΆœλ˜λŠ” μˆœκ°„ λͺ¨λ“  μž…λ ₯ 창을 μ‚¬μš©μžκ°€ ν™•μΈν–ˆλ‹€κ³  λ³Ό μˆ˜λ„ 있기 λ•Œλ¬Έμ΄λ‹€.
const formSubmitssionHandler = (event) => {
  event.preventDefault();
  setEnteredNameTouched(true);

  if (enteredName.trim() === "") {
    setEnteredNameIsValie(false);
    return;
  }

  setEnteredNameIsValie(true);
  setEnteredName("");
};

  • μ €μž₯ν•˜κ³  μ•„λ¬΄λŸ° 것도 μž…λ ₯ν•˜μ§€ μ•Šκ³  Submit λ²„νŠΌμ„ 눌러보면 μ—λŸ¬ 메세지가 좜λ ₯ 되며, 메세지λ₯Ό μž…λ ₯ν•˜κ³  λ‹€μ‹œ Submit λ²„νŠΌμ„ λˆ„λ₯΄λ©΄ μ½˜μ†” 창에 "Name Input Is valid!"κ°€ 좜λ ₯λ˜λŠ” 것을 확인할 수 μžˆλ‹€.

정리

  • λΆ„λͺ… μ½”λ“œμ˜ κΈΈμ΄λŠ” κΈΈμ–΄μ‘Œμ„μ§€ λͺ°λΌλ„, 쑰금 더 λ‚˜μ€ μ½”λ“œ 또 κΉ”λ”ν•œ μ½”λ“œκ°€ 된 것을 μ•Œ 수 μžˆλ‹€. λ˜ν•œ 이런 λ¦¬νŒ©ν† λ§μ„ ν†΅ν•˜μ—¬ 더 λ§Žμ€ 유슀 μΌ€μ΄μŠ€λ₯Ό λ‹€λ£° 수 있게 λ˜μ—ˆκ³ , λ™μ‹œμ— μ΄μ „μ˜ 눈 μ†μž„μˆ˜μ— κ°€κΉŒμš΄ λΆ€μ •ν™•ν•œ λ°©λ²•μœΌλ‘œ 초기 값을 μž‘μ„±ν•œ 것이 μ•„λ‹ˆλΌ, μ •ν™•ν•œ 값을 μž‘μ„±ν•˜μ—¬ μ •μƒμ μœΌλ‘œ μž‘λ™λ  수 있게 λ˜μ—ˆλ‹€.

✦ 좜처


🚨 ν•΄λ‹Ή ν¬μŠ€νŒ…μ€ Udemy의 ⌜React μ™„λ²½ κ°€μ΄λ“œβŒŸ κ°•μ˜λ₯Ό 베이슀둜 ν•œ κΈ°λ‘μž…λ‹ˆλ‹€.
✍🏻 κ°•μ˜ git repo λ°”λ‘œκ°€κΈ°

profile
일단 곡뢀가 '적성'에 λ§žλŠ” 개발자. κ·Όμ„±μžˆμŠ΅λ‹ˆλ‹€.

0개의 λŒ“κΈ€