10. Input 기능 다루기

서론

Input 태그를 이용해서 사용자에 입력받은 값을 처리하는 방법에 대해 배웠다.
이를 진행하기 전에 먼저 html Input 태그 기능에 대해 간략하게 정리해보았다.
Input 태그는 유저의 입력을 받아올 수 있는 다양한 박스를 제공하는데 대표적으로 텍스트, 날짜, 범위 그리고 드롭다운 메뉴 등이 있다. 사용 방법은 type = "" 를 넣어주거나 textarea, select 태그를 사용해주면 된다.

<input type="text"></input>
<input type="range"></input>
<input type="date"></input>
<input type="number"></input>
<textarea></textarea>
<select></select>​

 

 

본론

 

 

Input 이벤트 핸들러

 

사용자가 input 태그에 뭔가를 입력했을 때 코드를 실행해주고 싶을 때 이벤트 핸들러를 이용해주면 된다.

<input onChange={() => {실행코드}}/>

 

위 코드처럼 onChange(무언가 변화가 일어날때), onInput(Input태그에 뭔가 입력할 때) 이벤트 핸들러를 사용하면 해당 이벤트가 발생할 때마다 실행코드가 실행된다.

 

 

입력값 가져오기

 

만약 유저가 입력한 값을 가져오려면 어떻게 해야할까? 변수를 하나 지정해두고 유저가 입력한 값을 해당 변수에 할당해주면 된다. 

파라미터를 하나 추가해주고 .target.value라고 입력하면 현재 Input 태그에 입력된 값을 가져올 수 있다.

<input onChange={(e) => {console.log(e.target.value)}}/>

 

그러면 이 입력값을 state에 저장해보도록 하겠다.

function App() {
	let [inputValue, setInputValue] = useState('');
    return (
    	<input onInput={(e) =>{
        	setInputValue(e.target.value);
           	console.log(inputValue);
        }}
    )
}

 

위 코드를 실행하면 Input 이벤트가 발생할 때마다 state에 입력값을 저장해준다.

 

** 참고

그런데 실제로 위 코드를 실행해보면 입력값은 aa인데 콘솔창에는 a만 떠있는 것을 볼 수가 있다.

왜냐하면 state 변경함수는 비동기적으로 처리되기 때문에 즉각적인 처리가 이루어지지 않는다.

자바스크립트는 늦게 처리되는 코드들보다 즉각적으로 처리되는 코드를 먼저 실행하므로 console.log(현재값) 을 출력하고 state 변경함수가 실행되므로 콘솔창은 한 박자씩 늦는 것을 볼 수 있다.

 

 

** 실습

1. Input에 입력하고 글 발행을 누르면 글이 새로 하나 발행되는 기능 추가하기

 

현재 글 목록들은 map을 이용해서 반복문처리 되어있으므로 title 배열에 현재 입력값을 하나 추가해주기만 하면 제대로 작동될 것이다.

function App() {

    let [title, changeTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
    let [like, updateLike] = useState([0, 0, 0]);
    let [inputValue, setInputValue] = useState('');
    
	return (
    	{/* 글 발행 기능 */}
		<input onInput={(e) => {
        	setInputValue(e.target.value)}}></input>
		<button onClick={() => {
        	title.push(inputValue);
        	like.push(0);
        	changeTitle([...title]);
        	updateLike([...like]);
		}}>글 발행</button>
    )
}

좋아요 기능도 글을 추가하면 기본적으로 0부터 시작이 돼야하므로 title과 똑같은 과정을 like 배열에도 수행해준다.

 

2. 글마다 삭제 버튼을 만들고 삭제 버튼을 누르면 글이 삭제되는 기능 추가하기

 

위와 마찬가지로 title 배열에서 해당 데이터를 삭제해주기만 하면 된다.

function App() {

	let [title, changeTitle] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
	let [like, updateLike] = useState([0, 0, 0]);

	return (
		{
			title.map(function(a, i) {
				return (
					<...>
					<button onClick={() => {
					title.splice(i, 1);
					like.splice(i, 1);
					changeTitle([...title]);
					updateLike([...like]);
					}}>삭제</button>
					</div>
				)
			}
		})
	}

삭제 기능은 1번과 다른게 마지막 값을 삭제하는게 아니라 클릭한 값을 삭제해야 하는 것이므로 해당 배열 인덱스 값을 저장해서 해당 인덱스 값을 삭제하도록 splice() 함수를 사용했다.