Input (사용자가 입력한 값 다루기)

Input box 종류

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

이거 말고도 다양한 종류의 인풋 박스가 많으니 필요할 때 찾아쓰기

 

 

 

<input>에 뭔가 입력하면, 코드가 실행되도록

이럴땐 onChange 아니면 onInput 이벤트핸들러를 부착하면 됩니다

 

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

이벤트 핸들러는 많다

onMouseOver={ } 이건 이 요소에 마우스를 댔을 때 안의 코드를 실행해줌

onScroll={ }  이건 이 요소를 스크롤 했을때 안의 코드를 실행해줌

 

 

 

<input> 입력값을 가져오는 법

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

e라는 파라미터를 추가하고, e.target.value를 쓰면 사용자가 입력한 값을 가져올 수 있음

참고로 e말고 작명 자유롭게 해도됨

e.target => 이벤트가 발생한 html 

e.preventDefault()=> 이벤트 기본동작 막음

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

 

function App (){

  let [입력값, 입력값변경] = useState('');
  return (
    <input onChange={(e)=>{ 
      입력값변경(e.target.value) 
      console.log(입력값)
    }} />
  )
}

state에 문자를 저장하고 싶은데 일단 기본값을 뭘 넣을지 모르겠으면 따옴표 2개만 치면 됨

입력값이라는 state를 필요한 곳에서 마음대로 사용하면 됨 (state 변수)

 

 

 

 

 

---

   코딩애플님이 주신 문제

 

 

(힌트)

- html 직접 만질 필요는 없습니다. 지금 글제목 state만 바꾸면 html도 알아서 바뀌지 않겠습니까 

- array에 자료를 추가하거나 삭제하는 문법은 모르면 구글찾아봐야지 생각한다고 나오는 것은 아닙니다. 

 

 

1. input에 뭐 입력하고 발행버튼누르면 블로그에 글이 하나 추가되는 기능을 만들어보십시오. 

let [글제목,글제목변경] = useState(['남자코트추천','강남우동맛집','파이썬독학']);
let [입력값,입력값변경] = useState('');

<input onChange={(e)=>{입력값변경(e.target.value)}}></input>
<button onClick={()=>{let copy = [...글제목]; copy.unshift(입력값); 글제목변경(copy)}}>글발행</button>

우리가 입력하는 곳은 input이고, 버튼을 누르는 곳은 button 이다. 순차적으로 생각해서 헷갈리지 않게 정리해보자.

먼저, 입력값은 상시 변경되기 때문에 state를 써주자

그래서 먼저 state 선언을 해주었다. 앞으로 문자열을 쓸건데 초기값을 어떻게 할지 모를땐 ''로 써주자

input 태그로 돌아가서, onChange에 e를 넣어주고, 유저가 입력하는 값에 따라 입력값이 변경될 수 있도록

입력값변경 함수 안에다가 e.target.value 를 써준다.

그러면 onChange에 변화가 생길때마다, 입력값 변수는 유저가 입력하는 값으로 바뀐다

 

onClick으로 돌아가서, 글제목변경 안에 [e.target.value, '남자코트추천', '강남우동맛집', '파이썬독학'] 이런식으로 넣고 싶은 충동이 들 수 있지만, 우리 지성인이 되어 생각해보자^^(나도 첨엔 이렇게 썻다.. 괜찮타)

글제목변경함수 안에는 기존의 주소를 가진 글제목이 아니라, 새로운 주소를 가진 새로운 배열이 들어가야 한다.

주소가 다르게 복사를 할때는 [...기존객체] 이런식으로 요긴하게 쓰인다

여기서도 let copy = [...글제목] 으로, copy 라는 ['남자코트추천','강남우동맛집','파이썬독학']을 나타내는 새로운 배열을 완성했다

그럼 거기에 글을 하나씩 추가하고 싶으니, copy.unshift()를 써주자. 이때 ()안에는 우리가 앞에 썼던 입력값 변수를 넣어준다.

(참고로,unshift()는 원본 배열이 변하는 함수다. )

마지막으로, 글제목변경함수를 통해 글제목을 copy로 갈아치워주자!

끝이다

 

이렇게 치면 아래처럼 글이 추가되는 걸 볼수이따!

 

 

 

2. 글마다 옆에 삭제버튼 하나씩 만들어놓고 삭제버튼누르면 글이 없어지는 기능을 만들어보십시오.

 

let [글제목,글제목변경] = useState(['남자코트추천','강남우동맛집','파이썬독학']);
let [입력값,입력값변경] = useState('');

{
      글제목.map(function(a,i){
      return(
      <div className='list'>
      <h4 onClick={()=>{ setModal(true); setTitle(i);}}>{글제목[i]}
      <span onClick={(e)=>{
        e.stopPropagation();
        /*변경하려는 state자료가 array니까 한번 복사를 해주고 그 복사본을 써줘야댐 */
        let copy =[...따봉]; //[0,0,0]
        copy[i] = copy[i]+1; //각 자리 값에다가 +1을 해줌
        따봉변경(copy)
        }}>👍🏻</span> {따봉[i]}
      </h4> 
      <p>2월 17일 발행</p>
      <button onClick={()=>{let copy =[...글제목]; copy.splice(i,1); 글제목변경(copy)}}>삭제</button>
      </div>
      )
      })
    }

일단 버튼을 먼저 만들어준다.

버튼에 onClick을 써서 지워주려고 하는데,

우리가 전달하는 정보인 글제목이 객체이니까 복사본을 만들어주고 진행하는 것이 좋다. (왜냐면 주소가 다른 새로운 배열이여야지 state변경함수가 갈아치워주기 때문,, 뭔말인지 모르면 그냥 객체/ 배열이면 복사하고 시작하자^^)

 

그래서 let copy = [...글제목] 해주었고, 이 배열에서 원소를 제거하고 싶기 때문에 splice() 함수를 써볼테다

splice() 함수 는 여러개의 원소를 삭제하거나 다양한 위치의 원소를 제거하는데 유리하다!

<참고>

첫 번째 인수는 제거할 배열 요소의 위치(인덱스)를 설정합니다.

두 번째 인수는 제거할 배열 요소의 개수를 설정합니다.

copy.splice(i,1) 해주고, 글제목변경 함수 안에다가 copy를 넣어준다아~

끝

 

내가 삭제버튼 눌러서 다 지워버렸다 우하하