뼈대없는 리액트를 하다가 좌절을 맛봐서 html과 js를 다시 공부하고 있다. nomad coder로 js를 공부하고 있는데, 알차고 재밌는게 나와서 글을 쓴다.

쓸모 없는 js코드 미리보기

로그인 기능을 구현할 때 여러 제한사항들이 있다.
js로 이렇게 쓸모 없이 짤 수도 있고...

function clickEventHand() {
    const value = loginInput.value;
    if (value === "") {
        console.log("입력좀해줘");
    } else if (value.length <= 3) {
        console.log("조금 더 입력해줘");
    } else if (value.length >= 15) {
        alert("너무 길어");
    } else {
        console.log("hello", value);
        loginInput.value = "";
    }
}

loginButton.addEventListener("click", clickEventHand);

js로 이런 쓰잘대기없는 if 문이 없어도, 다 할 수 있었다. 그래서 기본기가 중요하다고 말하는 것 같다.

---

Form Submisson

사실 div랑 비슷한 녀석인 줄만 알았다. 아직 널 잘 몰랐다. 내가.... js 없이도 깔끔하게 input과 button을 연결할 수 있는 훌륭한 녀석

복잡한 놈들을 다 집어치워버리고, html로 돌아간다.

        <form class="login-form">
            <input
                required
                maxlength="15"
                type="text"
                placeholder="이름이 뭐니?"
            />
            <button type="submit" value="Log in">Log In</button>
            <script src="app.js"></script>
        </form>

우선 input에는 반드시 입력을 요하는 required 속성이 있다. 그럼 입력하지 않으면 메세지가 뜬다. maxlength="15" 이 두가지 속성은 아래 자바스크립트와 거의 같다고 보면 된다.

    if (value === "") {
        console.log("입력좀해줘");
      else if (value.length >= 15) {
        alert("너무 길어");

그렇다. 잘 모르면 그냥 구글링해대고 배껴대는 것이다. 반성하자.

다음으로 button 의 type을 submit으로 주어지면 자연스레 묶여진 input과 value를 공유하게 된다. 그러면 렌더링되며 값이 저장된다. 근데 여기서 조건이 있다.

button과 input은 form이라는 부모 밑에서 함께 있어야한다.

이로서 이들은 하나가 된다.
하지만 button을 클릭하면 잦은 렌더링이 발생하게 되는데 이는 js로 쉽게 방지 할 수 있다.

function clickEventHand(event) {
    event.preventDefault();
    const value = loginInput.value;
    console.log(value);
    loginInput.value = "";
}

loginButton.addEventListener("click", clickEventHand);

react에서는 거의 쓰게 되지 않아서 까먹었던 event.preventDefault()를 재소환했다. 그리고 value 값을 초기화해주었다.

꽤 그럴싸한 login 기능이 되었다.