글쓰기1

결과물

 

Input Tag 활용

Input tag(input, textarea, select, ...) 사용시 tag 내 값을 다루기 위해 event handler를 사용한다.

onChange 이벤트를 사용하는 예제는 아래와 같다.

let [inputTagValue, setInputTagValue] = useState(''); // inputTagValue state 정의

...
// e : EventArg
// e.Target : 이벤트 호출자. 여기에선 input tag
// e.Target.Value : 이벤트 호출자의 값. 여기서는 input tag에 기록된 value
<input onChange={ (e) => { setInputTagValue(e.Target.Value); } }/>

---

이벤트 버블링

<div ...>
	<h4 onClick=...> <span onClick=...></span></h4>
</div>

위와 같이 HTML이 정의된 경우 span을 click하면 div, h4, span 모두 click한 효과가 나온다.

따라서 span 영역에만 구현하려고 하느 onClick이 h4의 onClick과 함께 실행되는 문제가 있다.

이렇게 하위 HTML 요소의 이벤트가 상위 HTML 요소로 퍼지는 현상을 이벤트 버블링이라고 한다.

eventHanlder 내에 stopPropagation();을 호출해주면 이벤트 버블링을 방지할 수 있다.

---

Input태그에 적혀진 내용을 글쓰기 버튼을 통해 Blog에 게시하고 게시물에 삭제 버튼을 두고 삭제 기능을 구현하자

지금까지 작성해온 예제는 articleTitle state만큼 반복하면서 HTML 요소를 그려주는 방식으로 구성되었다.

따라서 글쓰기, 삭제는 HTML요소를 추가할 필요 없이 articleTitle state만 조정하면 별도의 구현 없이 사용할 수 있다.

따라서 필요한 기능은 두가지이다.

1. articleTitle Array에 문자열 추가하기
2. articleTitle의 특정 값을 array에서 제거하기

해당 기능을 구성하고 HTML 요소의 eventHandler에 등록하여 구현한다.

// 1. articleTitle에 요소 추가
function insertArticleTitle(idx, value) {
  let copy = [...articleTitle];
  let resultArray = [...copy.slice(0, idx), value, ...copy.slice(idx)]; // slice를 통해 idx 앞부분 + 신규 값 + idx 뒷부분을 구성
  setArticleTitle(resultArray);
}

// 2. articleTitle의 특정 요소 제거
function deleteArticleTitle(idx) {
  let copy = [...articleTitle];
  if (idx !== -1) {
    copy.splice(idx, 1); // remove at
  }
  setArticleTitle(copy);
}