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

목차

• 사용자 정의 훅 재사용하기
• 사용자 정의 훅 연습하기

✧ 사용자 정의 훅 재사용하기

• name에 Input에 대해서 use-input 커스텀 훅을 이용한 것처럼, 동일하게 복사해서 해당 useInput 커스텀 훅을 가져오고, name에 적용한 것처럼 커스텀 훅에서 반환한 값들의 이름을 email 전용으로 수정해준다.

// name
const {
  value: enteredName,
  isValid: enteredNameIsValid,
  hasError: nameInputHasError,
  valueChangeHandler: nameChangeHandler,
  inputBlurHandler: nameBlurHandler,
  reset: resetNameInput,
} = useInput((value) => value.trim() !== "");

// e-mail
const {
  value: enteredEmail,
  isValid: enteredEmailIsValid,
  hasError: emailInputHasError,
  valueChangeHandler: eamilChangeHandler,
  inputBlurHandler: eamilBlurHandler,
  reset: resetEmailInput,
} = useInput((value) => value.trim() !== "" && value.includes("@"));

• 그리고 더이상 사용하지 않는 useState로 작성했던 값과 해당 컴포넌트 내에서만 사용했던 전용 함수들을 모두 지워준다.

// const [enteredEmail, setEnteredEmail] = useState("");
// const [enteredEmailTouched, setEnteredEmailTouched] = useState(false);

// const enteredEmailIsValid =
//   enteredEmail.trim() !== "" && enteredEmail.includes("@");
// const emailInputIsInvalid = !enteredEmailIsValid && enteredEmailTouched;

• 폼을 제출할 때에 유효성을 검증하고, input 창을 리셋해주는 formSubmitssionHandler 함수에도 useState를 사용해서 리셋해주었던 부분을 지우고, 커스텀 훅의 리셋 함수인 resetEmailInput(reset)을 호출해 준다.

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

  if (!enteredNameIsValid || !enteredEmailIsValid) {
    return;
  }

  resetNameInput();

  // setEnteredEmail("");
  // setEnteredEmailTouched(false);
  resetEmailInput();
};

• useInput 커스텀 훅에서 사용하는 hasError 변수를 기반으로 삼항연산자를 사용한 class 설정 또한 커스텀 훅에서 가져온 emailInputHasError으로 수정해준다.

const emailInputClasses = emailInputHasError // true 이면,
  ? "form-control invalid" // 경고 css
  : "form-control";

• email을 입력하는 input 태그에 포인터 해주었던 함수도 useInput 커스텀 훅의 함수들로 대체해준다. 아래의 삼항연산자를 이용한 부분도 emailInputHasError로 수정해준다.

<input
  type="email"
  id="email"
  onChange={eamilChangeHandler}
  onBlur={eamilBlurHandler}
  value={enteredEmail}
/>;
{
  emailInputHasError && <p className="error-text">Email must not be empty.</p>;
}

정리

• 저장하고 확인해보면 이전과 동일하게 작동되고 있음을 알 수 있다. 둘다 이전과 동일하게 작동하고 있지만 현재의 코드와 비교하여 알수 있는 것은 현재의 코드가 훨씬 간결하고 중복된 코드가 적어졌다는 사실이다.

✧ 사용자 정의 훅 연습하기

• 지금까지 배운 내용을 바탕으로 SimpleInput 컴포넌트 대신, BasicForm 컴포넌트를 이용해서 이전처럼 커스텀 훅을 이용한 유효성 검증에 도전해볼 것이다.

// import SimpleInput from "./components/SimpleInput";
import BasicForm from "./components/BasicForm";

function App() {
  return (
    <div className="app">
      {/* <SimpleInput /> */}
      <BasicForm />
    </div>
  );
}

export default App;

• 가장 먼저, App 컴포넌트 내부에 SimpleInput 컴포넌트 대신 BasicForm 컴포넌트로 대체한다.

BasicForm.js

before

const BasicForm = (props) => {
  return (
    <form>
      <div className="control-group">
        <div className="form-control">
          <label htmlFor="name">First Name</label>
          <input type="text" id="name" />
        </div>
        <div className="form-control">
          <label htmlFor="name">Last Name</label>
          <input type="text" id="name" />
        </div>
      </div>
      <div className="form-control">
        <label htmlFor="name">E-Mail Address</label>
        <input type="text" id="name" />
      </div>
      <div className="form-actions">
        <button>Submit</button>
      </div>
    </form>
  );
};

export default BasicForm;

after

import useInput from "../hooks/use-input";

const BasicForm = (props) => {
  // First Name
  const {
    value: enteredFirstName,
    isValid: enteredFirstNameIsValid,
    hasError: firstNameInputHasError,
    valueChangeHandler: firstNameChangeHandler,
    inputBlurHandler: firstNameInputBlurHandler,
    reset: resetFirstName,
  } = useInput((value) => value.trim() !== "");

  // Last Name
  const {
    value: enteredLastName,
    isValid: enteredLastNameIsValid,
    hasError: lastNameInputHasError,
    valueChangeHandler: lastNameChangeHandler,
    inputBlurHandler: lastNameInputBlurHandler,
    reset: resetLastName,
  } = useInput((value) => value.trim() !== "");

  // email
  const {
    value: enteredEmail,
    isValid: enteredEmailIsValid,
    hasError: emailInputHasError,
    valueChangeHandler: emailChangeHandler,
    inputBlurHandler: emailInputBlurHandler,
    reset: resetEmail,
  } = useInput((value) => value.trim() !== "" && value.includes("@"));

  let formIsValid = false;

  if (
    enteredFirstNameIsValid &&
    enteredLastNameIsValid &&
    enteredEmailIsValid
  ) {
    formIsValid = true;
  } else {
    formIsValid = false;
  }

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

    if (
      !enteredFirstNameIsValid ||
      !enteredLastNameIsValid ||
      !enteredEmailIsValid
    ) {
      return;
    }

    resetFirstName();
    resetLastName();
    resetEmail();
  };

  const firstNameInputClasses = firstNameInputHasError
    ? "form-control invalid"
    : "form-control";

  const lastNameInputClasses = lastNameInputHasError
    ? "form-control invalid"
    : "form-control";

  const emailInputClasses = emailInputHasError
    ? "form-control invalid"
    : "form-control";

  return (
    <form onSubmit={formSubmitssionHandler}>
      <div className="control-group">
        <div className={firstNameInputClasses}>
          <label htmlFor="name">First Name</label>
          <input
            type="text"
            id="name"
            value={enteredFirstName}
            onChange={firstNameChangeHandler}
            onBlur={firstNameInputBlurHandler}
          />
          {firstNameInputHasError ? (
            <p className="error-text">First Name 이 비어있습니다.</p>
          ) : (
            ""
          )}
        </div>
        <div className={lastNameInputClasses}>
          <label htmlFor="name">Last Name</label>
          <input
            type="text"
            id="name"
            value={enteredLastName}
            onChange={lastNameChangeHandler}
            onBlur={lastNameInputBlurHandler}
          />

          {lastNameInputHasError ? (
            <p className="error-text">Last Name 이 비어있습니다.</p>
          ) : (
            ""
          )}
        </div>
      </div>
      <div className={emailInputClasses}>
        <label htmlFor="name">E-Mail Address</label>
        <input
          type="text"
          id="email"
          value={enteredEmail}
          onChange={emailChangeHandler}
          onBlur={emailInputBlurHandler}
        />
        {emailInputHasError ? (
          <p className="error-text">E-Mail 주소가 다릅니다.</p>
        ) : (
          ""
        )}
      </div>
      <div className="form-actions">
        <button disabled={!formIsValid}>Submit</button>
      </div>
    </form>
  );
};

export default BasicForm;

우리의 훅와 지식을 새로운 형태에 적용하기

추가적으로 수정한 부분

• useInput에 전달하는 함수 로직 따로 전역 변수로 빼기.

const isNotEmpty = (value) => value.trim() !== "";
const isEmail = (value) => value.includes("@") && isNotEmpty;

// Name
const {
  value: enteredLastName,
  isValid: enteredLastNameIsValid,
  hasError: lastNameInputHasError,
  valueChangeHandler: lastNameChangeHandler,
  inputBlurHandler: lastNameInputBlurHandler,
  reset: resetLastName,
} = useInput(isNotEmpty);

// email
const {
  value: enteredEmail,
  isValid: enteredEmailIsValid,
  hasError: emailInputHasError,
  valueChangeHandler: emailChangeHandler,
  inputBlurHandler: emailInputBlurHandler,
  reset: resetEmail,
} = useInput(isEmail);

• 삼항 연산자가 아니라 &&로 로직 간결하게 줄이기

// {
//   firstNameInputHasError ? (
//     <p className="error-text">First Name 이 비어있습니다.</p>
//   ) : (
//     ""
//   );
// }

{
  firstNameInputHasError && (
    <p className="error-text">First Name 이 비어있습니다.</p>
  );
}

• 각각의 유효성 값으로 검사하기 보다는 변수 formIsValid 값 하나로 검사할 수 있다. formIsValid를 이용해서 버튼을 비활성화 했기 때문에 버튼을 비활성화한 상태에서는 애초에 폼을 제출할 수 없기 때문이다.

let formIsValid = false;

if (
  enteredFirstNameIsValid &&
  enteredLastNameIsValid &&
  enteredEmailIsValid
) {
  formIsValid = true;
} else {
  formIsValid = false;
}
...

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

  if (
    // !enteredFirstNameIsValid ||
    // !enteredLastNameIsValid ||
    // !enteredEmailIsValid
    !formIsValid
  ) {
    return;
  }

  // first name reset
  resetFirstName();
  // last name reset
  resetLastName();
  // email reset
  resetEmail();
};

• 저장하고 확인해보면, SimpleInput과 동일한 방식으로 작동하는 걸 알 수 있다.

✦ 출처

---

🚨 해당 포스팅은 Udemy의 ⌜React 완벽 가이드⌟ 강의를 베이스로 한 기록입니다.
✍🏻 강의 git repo 바로가기