[TIL] 20230616 - React useState 유효성 검사+preventDefault / 개별 랜덤 ID 생성 등록

button 태그는 type이 submit이기 때문에 데이터 전송이 일어난다.

아무런 값이 없어도 말이다!

이렇게 뒤에 '/?' 물음표가 생겼다면 데이터 전송이 일어난것

그걸 막아주기 위해서 우리는 preventDefault를 사용!

 const clickAddTask = (e) => {
	if (!title || !text) {
        e.preventDefault();
        alert('입력되지 않았습니다');
    }
};

클릭이벤트가 일어나도 빈값이라면 preventDefault로 데이터 전송을 방지한다.

 

내코드에 적용하기 !

 

todo list 추가하는 핸들러!

// JS

const clickAddTask = () => {
    const addTaskList = {
        id: randomID(),
        title,
        text,
        isDone: false
    };
   const newArr = [...task, addTaskList];
   setTask(newArr);
   localStorage.setItem('todoItems', JSON.stringify(newArr));
   setTitle('');
   setText('');
};

// JSX

<div className="input-area">
    <form>
        <label>제목 </label>
        <input type="text" id="task-title" value={title} onChange={titleChangeHandler} />
        <label>내용 </label>
        <input type="text" id="task-text" value={text} onChange={textChangeHandler} />
        <button type="submit" className="add-btn" onClick={clickAddTask}>
            추가하기
        </button>
    </form>
</div>

유효성 검사를 안넣으면 이렇게 빈내용이 막 들어갑니다 ^^

 

if문으로 간단하게 유효성 검사를해서 빈 todo item은 들어가지 못하도록! 변경해봤다

// JS

const clickAddTask = (e) => {
    const addTaskList = {
        id: randomID(),
        title,
        text,
        isDone: false
    };
    if (!title) {
        e.preventDefault();
        alert('제목을 입력해 주세요');
    } else if (!text) {
        e.preventDefault();
        alert('내용을 입력해 주세요');
    } else {
        const newArr = [...task, addTaskList];
        setTask(newArr);
        localStorage.setItem('todoItems', JSON.stringify(newArr));
        setTitle('');
        setText('');
    }
};


// JSX

<div className="input-area">
    <form>
        <label>제목 </label>
        <input type="text" id="task-title" value={title} onChange={titleChangeHandler} />
        <label>내용 </label>
        <input type="text" id="task-text" value={text} onChange={textChangeHandler} />
        <button type="submit" className="add-btn" onClick={clickAddTask}>
            추가하기
        </button>
    </form>
</div>

굿굿

 

+ 내용추가 

form태그는 기본적으로 onSubmit 이벤트 핸들러 속성을 가지고 있다.

하위에 submit type을 가진 태그가 작동할때 일어나는 이벤트 !

그러나 submit type을 가진 태그가 없어도 button 태그가 default로 submit을 가지고 있기 때문에 작동한다.

그리고 submit을 하면 input 안에 텍스트 내용은 지워진다! form태그 일반적 속성(새로고침)때문에!

그러므로 preventDefault()를 해줘야한다!

<form onSubmit={(e)=>{
	e.preventDefault()
}}>
.
.
.

</form>

 

---

todo 아이템을 삭제 수정을 하기위해서는 개별 아이디가 필요하다.

그래서 나는

랜덤함수을 이용해서 랜덤 아이디를 만드는 방법으로 아이디를 부여했다.

const randomID = () => {
    return '_' + Math.random().toString(36).substr(2, 9);
};

처음에는 배열의 갯수에 +1을 더하는 식으로 만들었었는데 그렇게 되면 

tod-list가 삭제되면 id 값이 중복이되서 함께 삭제 되기도 했기때문에

 

그런데 다른 동료분께서는 다른 방법으로 아이디를 생성하셨다길래 그분 코드를 들여다 봤당

https://github.com/jinoc-git/react-personal-project-1 전에 같은 팀이였던 갓 jinoc님 ㅋㅋㅋ

혹쉬 이글을 보시고 깃주소나 닉네임을 내리면좋겠다면 댓글 주시길요 ㅎㅎㅎㅎ

많은 분들은 new Date로 만들기도 하셨다. 그것또한 좋은 방법인것같다. 그 날짜와 그시간은 동일할 수 없으니! 

동료분은 로컬스토리지에 저장할때 key를 하나 더 생성했다. 

아이디가 생성될때마다 count가 1씩 증가되는 새로운 key! 오호 ~~~

만약에 정말 정말 정말 큰사이즈의 플랫폼 서비스라서 엄청 만흔사람들이 동시에 이용할때

Date가 겹친다거나,,,? 랜덤 math 함수가 겹친다거나 할 수 가있나...?

그렇다면 새로운 key 숫자로 카운팅해서 아이디를 만드는게 더안전 할 수 있겠다 싶다

그럼 그 아이디 숫자는 몇까지......?가는 것인가

ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ

 

+react 랜덤아이디 사용(UUID)

yarn add react-uuid 명령어로 모듈을 설치 후 import하면 사용가능