I'm making ID validation for signing up. If the input length is less than 6 characters or Korean characters, It will print out false and hand over the value to the styled component and do conditional rendering through the value. If I receive Korean through RegExp, I returned false and RegExp is in the code. The number of characters applies well, but it doesn't apply even if I receive Korean. There's no error, but I think the chord is wrong. Can you tell me how to fix it?

SignUpUserInput.jsx:

import React, { useState } from 'react'
import styled from 'styled-components';
import redX from '../../resources/images/img/redX.png'

const InputWrap = styled.div`
  align-items: center;
  -webkit-appearance: none;
  background: rgb(250, 250, 250);
  border: 1px solid rgb(219, 219, 219);
  border-radius: 3px;
  box-sizing: border-box;
  color: rgb(38, 38, 38);
  display: flex;
  flex-direction: row;
  font-size: 14px;
  position: relative;
  width: 100%;

  .userIdCheck {
    //conditional rendering
    display: ${props=>props.isUserName===true?'none':'flex'};
    align-items: center;
    border: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    flex-direction: row;
    font: inherit;
    font-size: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-right: 8px;
    position: relative;
    vertical-align: middle;
  }

  .userIdCheckWrap {
    border: 0;
    font: inherit;
    font-size: 100%;
    margin: 0;
    margin-left: 8px;
    padding: 0;
    vertical-align: baseline;
    background-repeat: no-repeat;
    background-position: -249px -333px;
    height: 22px;
    width: 22px;
  }
`

function SignUpUserInput({userName,setUserName}) {

  const [isUserName, setIsUserName] = useState(false);
  const onChangeName = (e) => {

    // RegExp
    const regex = /^[ㄱ-ㅎ|가-힣] $/;
    const userNameInput = e.target.value

    if(userNameInput.length<6) {
      setIsUserName(false)
    }

    else if (regex.test.userNameInput){
      setIsUserName(false)
    }

    else {
      setIsUserName( true)
    }
  }

  return (
    <InputWrap isUserName={isUserName}>
      <label className='inputLabel'>
        <span className='inputHover'>
          사용자 이름
        </span>
        <input className='inputInput' value={userName} onChange={(e)=>{setUserName(e.target.value); onChangeName(e);}}/>
      </label>
      <div className='userIdCheck'>
        <span className='userIdCheckWrap'>
          <img src={redX} alt='redX' />
        </span>
      </div>
    </InputWrap>
  )
}

export default SignUpUserInput;

CodePudding user response：

It looks like you're checking regex.test.userNameInput, which is looking for a property called userNameInput on test. test is a method that returns a boolean. Try

    else if (regex.test(userNameInput)){
      setIsUserName(false)
    }