TIL 20211007 [항해99 22일차]

삭제 버튼 기능 추가

• props.is_me : 삭제 버튼을 게시글 작성자에게만 보여주기
• e.preventDefault(); : html에서 a태그나 submit 태그는 고유동작이 있는데 preventDefault()는 고유동작을 중단시킨다.
• e.stopPropagation(); : 이벤트가 실행되면 캡쳐링, 버블링 두가지 단계가 존재한다.
  stopPropagation()는 캡쳐링과 버블링을 막아준다. (즉, 상,하위 엘리먼트들로의 이벤트 전파를 막아준다.)
  => 그래서 deletePost클릭 이벤트에서 이두가지 함수가 실행되면 게시글을 클릭했을때 상세페이지로 이동하는것과 삭제하기 버튼 클릭했을때 삭제되는 이벤트의 중복을 해결 할 수 있다.
• postActions.deletePostFB(props.id) : postActions에서 deletePostFB라는 함수가 실행될때 props에있는 id값이 넘어간다는 의미

  리덕스 구조 & 미들웨어 데이터 삭제

• const deletePostFB = (post_id) => {} : deletePostFB라는 함수를 만듦, 여기서 (post_id)는 Post 컴포넌트에서 deletePostFB(props.id)을 받아온 값! 즉, props.id값은 post_id 값과 동일하다. (그리고 여기서 post_id는 a,b,id 등 마음대로 지정해도 상관은 없다.)

• splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경한다.

//splice() 구문
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

이번에 삭제에서 사용한 코드가 아래 코드 예시와 비슷해서 참고하기!

//3번 인덱스에서 한 개 요소 제거
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);

// removed is ["mandarin"]
// myFish is ["angel", "clown", "drum", "sturgeon"]

• findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다. 만족하는 요소가 없으면 -1을 반환한다.

//findIndex() 구문
arr.findIndex(callback(element[, index[, array]])[, thisArg])

---

오늘 그동안 배운걸 토대로 혼자서 삭제하기를 하면서 제일 간단한 삭제하기 조차 잘 안되서 너무 충격이었다...ㅠㅠ 그래도 이번 기회를통해 정말 기본적인 부분인데 계속 헷갈려왔던 ()안에 값들에 대해 이해할 수 있어서 광명을 찾은 기분이다..! 여태 ()안에다가 어떤값을 어떻게 넣어야할지를 몰라서 고민 많이했는데 props.id에 값이 deletePostFB의 post_id값으로 넘어갔다는걸 이제라도 이해해서 다행이다...