리액트 todoList <input> 관련 기능들

1. 아무것도 입력하지 않았을 때, 값 보내지 않게 하기

 

투두리스트에 빈 값을 보내도 추가된다면 좀 곤란할 것 같다. 그럼 투두리스트 실천하기는 좋겠다만 쓰는 의미가 없어지니 말이다.

 

 

 

우선 useRef를 호출하고, input을 참조하게 한다.

 

 

 

onClick 함수은 버튼의 onClick에 들어가는 이벤트 핸들러이다. 값을 최종적으로 보내는 부분이다.

 

if문을 통해 content가 공백이라면 inputRef가 참조하는 값에 포커스를 주고 바로 retrun 시켜버린다. 이렇게 되면 공백일 때 아래의 onCreate(content)가 실행되지 않고, 빈 값을 보내지 않게 된다.

 

 

 

 

 

2. input 박스에 값을 입력했을 때 초기화 

값을 입력하고 추가버튼을 누르면, 값은 잘 들어가지만 input 태그가 초기화가 안된다. 즉 뭔가 보냈지만 보낸 느낌이 나지 않는다.

 

 

 

앞서 봤던 버튼의 onClick에 들어가는 이벤트 핸들러이다. 이 부분에서 값을 보내는 onCreate 실행 이후 바로 상태변화함수에 다시 공백을 넣어주면!

 

 

 

값을 보냄과 동시에 input 박스가 초기화된다. 

 

 

 

 

 

3. 엔터키로 '추가'버튼 누르기

 

input 태그에는 onKeyDown={}라는 키가 눌렸을 때 발생하는 이벤트가 있다.

onKeyDown라는 이벤트 핸들러를 만들고,

키 코드가 13(엔터) 일 때 클릭이벤트를 발생시키게 한다.

 

그리고 input 태그에 넣어주면

 

 

 

 

엔터키를 눌러도 ‘추가’ 버튼이 실행됨을 확인할 수 있다.