<input> 입력값 가져오기 / 블로그 글 발행 + 삭제 기능

 

<input> 입력값 가져오기 / 블로그 글 발행, 삭제 기능

 

 

onChange / onInput

: <input>에 입력 시 코드 실행하는 이벤트

<input type="text" onChange={()=> { ... }}/>

 

 

 

<input> 입력값 가져오기

: 사용자가 입력한 글 다루기

 

• e.target.value
  : 이벤트가 발생한 html 태그에 입력한 값

1. 입력값을 저장할 state 생성하기

let [value, setValue] = useState('');

 

2. 입력값으로 state 값 변경하기

<input type="text" onChange={(e)=> { setValue(e.target.value)}}/>

 

 

 

 

 

이벤트 버블링 막기

 

e.stopPropagation()

<span>
   onClick={(e)=> { 
      e.stopPropagation(); // 이벤트 버블링 막기
   }}>
   👍
</span>

 

 

* 이벤트 버블링: 이벤트가 상위 html로 퍼져서 중복되는 현상

 

 

 

 

입력칸 종류

 

<input type="checkbox" />

 

 

 

<select>

 

 

 

<textarea>

 

 

 

 

---

 

블로그 글 발행 기능

 

발행 버튼 누르면 입력칸의 글 추가

1. 입력값 저장할 state 생성하기
2. input의 입력값 저장하기
3. 글 목록의 state 값에 input 입력값을 추가하기

let [value, setValue] = useState('');

<input type="text" onChange={(e)=> { setValue(e.target.value)}}/> 
// 2. 입력값을 setValue(e.target.value)}로 value에 저장

<button onClick={() => {
   let copy = [...제목];
   copy.unshift(value); // 3. copy 맨 처음에 유저가 입력한 값 추가
   제목변경(copy)
}}>발행</button>

 

 

 

 

 

 

글 삭제 기능

 

 

삭제 버튼을 누르면 글 삭제

1. 제목 배열 복사하기
2. 배열에서 원하는 자료 삭제하기 (.slice())
3. 제목 state 값 변경하기

<button onClick={()=> {
   let copy = [...제목]; // 1.
   copy.splice(i, 1); // 2. copy에서 원하는 자료 삭제
   제목변경(copy); // 3.
}}>삭제</button>

 

 

 

 

---

 

 

출처

코딩애플