<div id="readability-page-1" class="page"><div><h2 id="input-다루기-1--사용자가-입력한-글을-변수에-저장하는-법">input 다루기 1 : 사용자가 입력한 글을 변수에 저장하는 법</h2>
onInput vs onChange
=&gt; 둘이 하는 기능은 똑같다고 보면 된다.
=&gt; 뭔가 입력이 될 때 안의 함수가 실행됨
console.log로 확인 해보면 되는데 값을 우째 뽑아내냐면
리액트는 사용자가 입력한 값을 ? e.target.value
쌩 자바스크립트에서 쓰는 문법을 활용할 수 있다.
e는 이벤트 실행하는 오브젝트, 그안의 타겟 그리고 벨류값
<pre><code>&lt;input onChange={ (e)=&gt;{ e.target.value } } /&gt;</code></pre>
<img src="https://media.vlpt.us/images/2taesung/post/4790a341-1946-4fea-998c-85fd3e74d526/image.png"> 
=&gt; 하나가 바뀔때마다 누적해 저장되고 벨류값이 된다.
<img src="https://media.vlpt.us/images/2taesung/post/e46d32ae-66a7-4dae-b7c9-b9789f423576/image.png">
첫번째 사진에서 콘솔창에 warning이 뜨는걸 볼 수 있다.
이건 에러가 아니다 진짜 그냥 warning이다.
이 에러가 왜 떴냐면 
반복문 리액트에서는 map에서 (뷰에서는 for문)에서 키 값을 같이 보내기를 강요한다. 
map에서의 두번째 파라미터 i를 넣어주면 된다.
<pre><code>{
 글제목.map((a, i)=&gt;{
 return(
 &lt;div className="list" key="i"&gt;
 &lt;h3 onClick={ ()=&gt;{누른제목변경(i)}}&gt;{ a }&lt;span onClick={ ()=&gt;{ 따봉변경(따봉 + 1)} }&gt;👕&lt;/span&gt; {따봉}&lt;/h3&gt;
 &lt;p&gt;2월 17일 발행&lt;/p&gt;
 &lt;hr /&gt;
 &lt;/div&gt;
 )
 })
 }</code></pre></div></div>

2taesung.log

Taesung Lee

input 다루기 1 : 사용자가 입력한 글을 변수에 저장하는 법
onInput vs onChange
=> 둘이 하는 기능은 똑같다고 보면 된다.
=> 뭔가 입력이 될 때 안의 함수가 실행됨
console.log로 확인 해보면 되는데 값을 우째 뽑아내냐면
리액트는 사용자가 입력한 값을 ? e.target.value
쌩 자바스크립트에서 쓰는 문법을 활용할 수 있다.
e는 이벤트 실행하는 오브젝트, 그안의 타겟 그리고 벨류값
<input onChange={ (e)=>{ e.target.value } } />
=> 하나가 바뀔때마다 누적해 저장되고 벨류값이 된다.
첫번째 사진에서 콘솔창에 warning이 뜨는걸 볼 수 있다.
이건 에러가 아니다 진짜 그냥 warning이다.
이 에러가 왜 떴냐면 
반복문 리액트에서는 map에서 (뷰에서는 for문)에서 키 값을 같이 보내기를 강요한다. 
map에서의 두번째 파라미터 i를 넣어주면 된다.
{
 글제목.map((a, i)=>{
 return(
 <div className="list" key="i">
 <h3 onClick={ ()=>{누른제목변경(i)}}>{ a }{ 따봉변경(따봉 + 1)} }>👕 {따봉}</h3>
 2월 17일 발행
 <hr />
 </div>
 )
 })
 }

[React] input 다루기 1 : 사용자가 입력한 글을 변수에 저장하는 법

댓글