2023-04-14

유저가 입력한 데이터를 input으로 받아와보자

input태그 사용하기

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

등등 다양한 input 태그가 있다. 외우지 말고 필요할 때 찾아써보자

input이벤트 핸들러

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

onChange, onInput은 input에 유저가 뭔가 입력할 때마다 안에 있는 코드를 실행시켜준다.
onMouseOver={ } 이건 이 요소에 마우스를 댔을 때 안의 코드를 실행해준다.
onScroll={ } 이건 이 요소를 스크롤했을 때 안의 코드를 실행해준다.
이벤트 핸들러 또한 수십 개가 있다. 원하는 게 있을 때 찾아서 해보자.

input에 입력한 값 가져오기

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

e라는 파라미터를 추가해주고
e.target.value라고 적으면 현재 input에 입력된 값을 가져올 수 있다.
위 코드를 실행해보면 실제로 input에 입력된 값을 가져온다.

이벤트핸들로에 들어가는 함수에 저렇게 파라미터 e를 추가하면
e는 이벤트 객체 이런 식으로 부르는데 현재 발생한는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수다.

e.target 이러면 현재 이벤트가 발생한 곳을 알려주고

e.preventDefault() 이러면 이벤트 기본 동작을 막아주고

e.stopPropagation() 이러면 이벤트 버블링도 막아준다.이거 쓰면 좋아요 버튼 누를 때 모달창도 떠버리는 버그 해결가능

숙제1: 글 추가 기능과 삭제 기능을 구현해라

글 추가

function App (){
  let [글제목, 글제목변경] = useState([''여자 코트 추천', '김포 우동 맛집', 'React 독학']);
  let [입력값, 입력값변경] = useState('');
  return (
    <div>
     <input onChange={(e)=>{ 
             입력값변경(e.target.value) //() 안에 내용을 state에 보관을 했다
            //e.target.value == <input>에 입력된 값을 가져올 수 있다 
            //<input>입력된 값을 입력값이라는 state에 보관했다.
             console.log(입력값);
      <button onClick={()=>{ 
            let copy = [...글제목]; //버튼을 누르면 글제목 array 복사
            copy.unshift(입력값); //입력값이라는 변수. 복사한 배열에 .unshift라는 배열 추가 기능 사용
            //그 배열에 (유저가 웹에서 입력한)입력값 추가
            //copy에는 지금 입력값이 추가된 상태이다
            //왜 입력값변경이 아니고 괄호 안의 내용이 입력값일까? 
            //당연하지, 입력을 받은 값이니까. 입력받을 걸 변경하는 게 아니니까
            글제목변경(copy);
           }}>글발행</button>
    </div>
  )
}

글 삭제

<button onClick={(e)=>{
                  e.stopPropagation();
                  let copy = [...글제목];
                  copy.splice(i, 1); //copy 여기서 원하는 자료 삭제 splice(몇 번째, 몇 개)
                  글제목변경(copy);
                }}>삭제</button>

응용1. 글에 아무것도 입력안하고 발행버튼 누르는거 막으려면?

<button onClick={()=>{ 
            if(입력값 == ''){
              alert('내용을 입력하세요');
             }else{
              let copy = [...글제목]; 
            copy.unshift(입력값); 
            글제목변경(copy);
             }
           }}>글발행</button>