문제와 해결

용도에 맞는 코드 사용

<a
    href="/"
    className="button_"
    onClick={event => {
        event.preventDefault();
    }}
>
    +
</a>

클릭가능 한 걸 만드려면

앵커 태그에 preventDefault를 사용하지 말고 span이나 div 태그에서 mouse cursor를 변경해 용도에 맞게 사용한다.

 

삼항 연산자를 많이 쓰는건 좋지 않다(사망 연산자)

주의 공부한 흐름이 있으니 순서대로 따라하지 마시오!

e.target.value.length > 0 ? setIsValid(true) : setIsValid(false);

아래 함수로 바꿔주었는데

const isEmpty = e => {
    if (e.target.value.length < 0) {
        setIsValid(false);
    } else {
        setIsValid(true);
    }
};

확실하게 사용자의 눈에 보이지 않을때만 작동하기 위해  value가 빈칸일때로 바꿔주었다

const isEmpty = e => {
    if (e.target.value === '') {
        setIsValid(false);
    } else {
        setIsValid(true);
    }
};

 

아무데서나 함수로 호출하면 된다.

 

위 코드 추가사항 

아까 저기까지 적어놓고 와 고쳤다 하면서 기뻐하고 집 수리하러 갔는데 갑자기 

'근데 입력창에 스페이스만 입력하면 어떻게 되는거지?' 라는 생각이 들었다.

스페이스만으로도 밸류가 아무것도 없는 것은 아닐테니 말이다.

지금 다시 돌아와서 돌려보니 역시나 스페이스로는 추가가 됐다.

아래처럼 바꿔주면 스페이스가 있어도 추가가 안된다.

const isEmpty = e => {
    if (e.target.value === '' || e.target.value === '') {
        setIsValid(false);
    } else {
        setIsValid(true);
    }
};

문제2 스페이스가 두개 이상이면 추가가 된다. 

여기서는 식만 간단하게 바꿔주면 해결된다.

const isEmpty = e => {
    if (e.target.value === '' || e.target.value >= ' '*'') {
        setIsValid(false);
    } else {
        setIsValid(true);
    }
};

 e.target.value === ' ' 를  e.target.value >= ' '*'' 로 바꿔주었는데 처음에는 숫자에만 해당되지 않을까 생각했다가 밑져야 본전이지 하며 시도해 봤는데 어라? 완벽하게 작동했다

스페이스 한칸이나 스페이스 한칸으로 시작하는 글자 어떤 길이든 막게 되는 것 같다! 

 

문제3 아니다 안된다.저 코드는 앞공백 후 문자열이면 앞공백을 제거하고 등록이 된다. 중간에 연속공백이 있으면 1공백으로 대체한다. 

아래와 같이 바꿔준다.

const isEmpty = e => {
    if (e.target.value === '' || e.target.value.startsWith(' ')) {
        setIsValid(false);
    } else {
        setIsValid(true);
    }
};

까불지 말고 제공해주는거 써야겠다.

문자열이 공백으로 시작되는 것과 같으면 이라는 뜻으로 해석된다.