[React] React 복습 5(e.target.value)

 

 

map

 

map 내장 함수를 쓸 때 key 붙이면 warning이 안 생깁니다.

 

{
  글제목.map(function(a, i){
    return (
      <div className="list" key={i}>
        <h3 onClick={ () => { 누른제목변경(i) } }>
        	{ a } <span onClick={ () => { 업(따봉 + 1) } }>👍</span> { 따봉 }
        </h3>
        <p> 2021년 8월 2일 작성 </p>
        <hr/>
      </div>
    )
  })
}

 

e.target.value

 

(e) => {e.target.value}

 

<div className="input">
  <input onChange = { (e) => { 입력값변경(e.target.value) } } />
  <button onClick = { () => {

    let 글제목사본 = [...글제목];
    글제목사본.unshift(입력값);
    글제목변경(글제목사본)
  } }> 입력 </button>
</div>

 

1. 입력창 input에다 onChange를 붙여서 타이핑 할 때 이벤트를 줍니다.

2. e.target.value를 이용해서, 입력하는 값을 그대로 받습니다.

3. 버튼에 onClick을 붙여줌으로써, 클릭 시 { } 속 이벤트를 줍니다.

4. '글제목사본'이라는 변수를 새로 만들어, '글제목' 복사본([...글제목])을 정의합니다.

5. unshift는, () 안에 내용을 배열 첫 번째에 삽입하는 건데, unshift(입력값)으로, '입력값변경'으로 인해 변경된 '입력값'을 불러와, unshift로 배열 앞에 넣어줍니다.

6. 마지막으로 '글제목변경(글제목사본)'을 만들어, 최종적으로 버튼 클릭 시 (글제목변경(글제목사본))이 동작되게 합니다.