[React] input type=checkbox Y/n

🤨 나는 check를 하고 싶었을 뿐이고..

input 태그를 응용하는 중에 작성하는 오늘의 TIL 🔍

🧭 상황

input 태크에는 타입이 여러 종류가 있다.
type으로는 text tel date email password checkbox를 사용하기로 했고,
checkbox를 사용하다가 배운 사실을 적어보려고 한다.

type 중에서 checkbox와 radio타입이 같아보일 수도 있지만 같은 name을 갖고 있다면 checkbox 타입은 여러가지 중복 선택이 가능하지만 radio타입은 그 중 한가지만 고를 수 있다는 차이가 있다.

다시 본론으로 돌아와서,

모달창에 input과 그 안에 type이 들어갈 수 있게 만들어 주었다.
TextField는 MUI에서 사용되는 것으로 css에서 input과 같은 기능을 담당하고 있다.
그리고 그 안에 type에는 배열안에 담아놓은 객체들에서 각 지정한 type들을 넣어주도록 코드를 작성하였다.

 <Box>
  <Box
    display={"flex"}
    flexDirection={"column"}
    width={"30vw"}
    marginBottom={"2rem"}
    padding={"0 2rem"}
  >
  {inputContainer.map((item, index) => (
    <InputBox key={index}>
    <InputTitle>{item.title}</InputTitle>
    <TextField
      onChange={handleOnChange}
      type={item.type}
      name={item.prop}
      sx={{ width: "100%", marginTop: "0.5rem" }}
    />
    </InputBox>
  ))}
  <Button
    sx={{
      margin: "1rem",
      padding: "1rem",
      border: "1px solid lightgray",
      background: "lightblue",
    }}
    onClick={onSubmitHandler}
    >
    저장하기
    </Button>
  </Box>
</Box>

map을 활용하면 이렇게 배열안에 객체들로 재사용이 매우 간편해진다👍

• 아래와 같이 type에 맞춰 나오게 된다.

🤔 target.value는 잘 나올까?

참고로 모달화면 하나에서 로그인, 회원가입, 회원정보를 함께 사용하고 있기때문에 입력을 받고 보여주는 부분들이 겹쳐서 커스텀 훅을 사용했다.

• 커스텀 훅( 또는 useHook )을 사용했으니 참고 바랍니다.

우선 각 input에 name, type, 초기값을 정해주자!

interface UserDataProps {
  userId: string;
  userName?: string;
  password?: string;
  userTel?: string;
  userDate?: string;
  userEmail?: string;
  userCheck: boolean;
}

const initUserData = {
  userId: "",
  userName: "",
  userTel: "",
  userDate: "",
  userEmail: "",
  password: "",
  userCheck: false,
};

• Optional chaining (?.)

  ?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다.

🔍 userCheck만 type이 boolean이네?

체크박스 접근 방법은,

'선택하기 전엔 false를 주고, 체크를 했을 땐 true 취소하면 다시 false....'

와 같은 생각으로 코드를 작성했고 결과는 아래와 같았다..🤕

• 좋았어! 처음에 선택을 안했을 경우엔 원하는대로 false 값이 나오고👍

  • 

• 어라? 그래도 체크를 하니깐 false에서 상태가 바뀌긴 바뀐거니깐...?🤔

  • 

• 다시 눌러서 선택을 취소해도 이젠 상태가 안바뀌는데...? boolean이잖아? 왜?🤯

  • 

😫 boolean이면 둘 중 하나가 나와야하는거 아닌가?

🚑 mdn으로 출동

checkbox나 radio에 check가 되었어도 반환하거나 설정만 가능하다고 한다.

🤒 해결방법을 찾아보자

const onSubmitHandler = () => {
  loginModal
    ? alert(
        `
      아이디:  ${userData.userId} 
      비밀번호:  ${userData.password} 
    `
      )
    : setting
    ? alert(
        `
      이름:  ${userData.userName} 
      연락처: ${userData.userTel}
      생년월일: ${userData.userDate}
      이메일: ${userData.userEmail}
      비밀번호:  ${userData.password} 
      개인정보 동의: ${userData.userCheck ? "YES" : "NO"}
    `
      )
    : alert(
        `
        이름:  ${userData.userName}
        아이디:  ${userData.userId} 
        비밀번호:  ${userData.password} 
      `
      );
  };

• 기존에는 개인정보 동의: ${userData.userCheck} 라고만 되어있던 부분에 삼항연산자를 넣어서 개인정보 동의: ${userData.userCheck ? "YES" : "NO"} 클릭 여부에 따라 "YES"와 "NO"가 나오도록 코드를 작성하였다.

🤕 그래도 문제..

클릭 전에는 "NO"가 나오고 클릭 후에는 "YES"가 나온다.

이후 다시 클릭해도 클릭을 했으니 "YES"...😫

🤖 컴퓨터가 되어서 코드를 작성하자

const handleOnChange = (e: any) => {
    if (e?.target?.type !== "checkbox") {
      return setUserData({
        ...userData,
        [e?.target?.name]: [e?.target?.value],
      });
    } else {
      if (e?.target?.checked) {
        setUserData({ ...userData, [e?.target?.name]: ["YES"] });
      } else {
        setUserData({ ...userData, [e?.target?.name]: ["NO"] });
      }
    }
  };

type 부터 확인하자 (코드를 풀면 아래와 같다.)

// 만약 type이 checkbox가 아니라면?
// ( 우선 checkbox가 아닌 값을 먼저 반환해 주기로 했다.)
// 아니라면? 그 값엔 입력받은 값을 입력한 곳에 name에 .value를 저장.

// 아니라면? (그러니깐 checkbox가 맞다면?)
// 그렇다면 경우는 2가지. 클릭이 되었거나(참이거나) 안되었거나(거짓이거나).
	// 참고로 checkbox는 .value이 아닌 .checked로 boolean을 확인할 수 있다.
// 참이면 "YES"를 설정
// 거짓이면 "NO"를 설정

⚒️이젠 원하는 동작이 됩니다!

삼항연산자나 좀 더 간결하게 작성을 할 수도 있지만, 보통 함수 내에서는 if문을 사용하여 직관적이고 가독성이 좋도록 작성하라는 말씀을 들어 위와 같이 작성하였습니다!