🖤 <input> 태그 사용하기
- 유저가 입력받을 수 있는 박스를 생성하고 싶을 땐
<input>태그를 사용하면 된다.
🖤 <input>에 입력 시 코드를 실행하기
- 유저가
<input>에 무언가를 입력하면 코드를 실행시키고 싶을 때에는 onChange 혹은 면 onInput 이벤트핸들러를 부착하면된다.
<input onChange={()=>{ 실행할코드 }}/>🖤 <input>에 입력한 값 가져오기
<input onChange={(e)=>{ console.log(e.target.value) }}/>-
e.target.value 는 현재
<input>에 입력된 값을 가져올 수 있다. -
이벤트핸들러에 들어가는 함수에 파라미터 e(이벤트 객체) 를 추가하면 현재 발생하는 이벤트와 관련한 유용한 기능들을 제공한다고 한다.
ex)
e.target -> 현재 이벤트가 발생한 곳
e.preventDefault() -> 이벤트 기본동작 막기
e.stopPropagation() -> 이벤트 버블링 막아주기 -
이벤트 버블링은 클릭 시 상위 태그까지 클릭되는 것을 말한다.
-
현재 좋아요 버튼을 누르면 모달창이 뜨는데 span 태그에 e.stopPropagation(); 을 추가해서 따봉 숫자만 오르게 만들었다. ㅎㅎ
🖤 <input>에 입력한 데이터 저장하기
- state를 배웠으므로 state를 사용했다.
function App (){
let [입력값, 입력값변경] = useState('');
return (
<input onChange={(e)=>{
입력값변경(e.target.value)
console.log(입력값)
}} />
)
}- 입력값 이라는 state를 만든 후 onChange 될때마다 state에 e.target.value 를 넣으라는 코드를 짰다.
- state에 문자를 저장하고 싶은데 기본값을 모를 땐 따옴표 2개를 치면 된다.💡
📒 오늘의 숙제
- input에 입력 후 발행버튼을 누르면 블로그에 글이 추가되는 기능 만들기
- 글마다 옆에 삭제버튼 만든 후 삭제버튼을 누르면 글이 없어지는 기능 만들기
🤍 숙제1
- input 옆에 글 발행이라는 버튼을 만들었다.
<input onChange={(e)=> {입력값변경(e.target.value)}}></input><button>글 발행</button>- "글 발행 버튼을 누르면 입력값을 글제목 state 맨 앞에 추가해주세요" 라는 코딩을 짜면 된다.
<button onClick={()=> (글제목.unshift(입력값))}>글 발행</button>- 새로운 요소를 배열의 맨 앞에 추가하는 unshift()를 사용했다.
<unshift 예시>
var arr = [1, 2];
arr.unshift(0);
// arr is [0, 1, 2]
arr.unshift(-2, -1); // = 5
// arr is [-2, -1, 0, 1, 2]
arr.unshift([-3]);
// arr is [[-3], -2, -1, 0, 1, 2]🤍 숙제2
{
글제목.map(function(a, i){
return (
<div className="list" key={i}>
<h4>
...
</h4>
<p>2월 18일 발행</p>
<button>삭제</button>
</div> )
})
}- 글List에 삭제버튼을 만들었다.
- "삭제 버튼을 누르면 누른 글제목을 state에서 제거해주세요" 라는 코드를 짜면 된다.
<button onClick={()=>(글제목.splice({a}))}>삭제</button>- {a} 는 array 안의 자료들이어서 적었는데 작동이 잘 되지 않는다...
💻