🏷️ 수업 목표
- input값 초기화
- 이벤트 전파와 버블링
수업 리뷰
타입스크립트 리뷰
Pick 은 데이터 타입을 의미, 아이쿼리페치보드 아규먼트는 는 보드아이디
isActive 확인(emotion에 props.isActive)
자유게시판 리뷰
아래는 멘토님의 방식. 상세페이지 index 안 파일에 댓글과 댓글목록 컴포넌트를 따로 만들어주셨다.
나는 상세보기 안에 넣어주었다.(상세페이지 프리젠터 밑)
차이점: 상세보기, 댓글작성, 댓글 목록을 따로따로 해놓으면 나중에 페이지 새로 만들 때 컴포넌트들을 재사용할 수 있고, 내가한 방법은 그 페이지 자체를 재사용할 때 용이할 수 있다.
리패치쿼리 부분 확인
이부분 나는 router.push로 해서 해당 페이지로 이동하게 만들었는데, 게시물 등록하고 바로 보이는거 리패치쿼리 보이게 해도 된다.(주소가 다르길래 안되는줄 알았음)
1. 이벤트 버블링
💡 수업중 퀴즈
아무거나 클릭하면 작성자님이 작성한 글입니다 출력되게.
나는 아이디값을 id로 했어서 값이 불러와지긴 하는데 언디파인드가 떴다. ➡️ 아이디값을 writer로 하니 해결되었다.
위처럼 하면 어디든 클릭해도 작성자가 나온다.
다쓰기 귀찮으니까 효율적으로 하려고 부모태그에 onclick,id값을 넣어주었다. 그런데 어쩔때는 작성자가 나왔다가 어쩔때는 안나오고 한다. ➡️ 이벤트 버블링
우리가 설정해놓은 검정부분(공백)을 누르면 제대로 나온다. 그렇지만 위에 제목이나 게시글을 클릭하면 제대로 나오지 않고있는 것.
문제
- 어디를 클릭해도 모두 제대로 나오게 하고싶다면 어떻게 할까?
- 그런데 위 파란부분 div도 누르면 클릭은 먹히긴 한다. (부모태그에 있으니까 다 걸려있는거라서)
해결
- 클릭할 시, 꾹 눌린다. (바닥까지) 그래서 파란버튼 눌리면 검정(부모)까지 눌리게 되는 것. ➡️ 이벤트 전파 (propagation)
이렇게 onClick을 두개 설정하고 파란버튼 누르면 , 알럿이 두개가 다 뜨는것을 볼 수 있다.
🚫 자식에서 부모로 이벤트전파가 된다! 형제랑은 상관이 없다.
뽀글뽀글 아래에서 위로 올라간다 라고 해서 버블링이 된다 라고 한다.
event.target은 우리가 클릭한 그 태그를 말한다. 그렇다면
온클릭 함수는 위에 넣고 아이디값을 밑에 넣어보자
클릭 이벤트는 위에서 발생하지만 들어오는 이벤트의 이벤트 타겟은 위 이미지처럼 연두박스가 타겟이 된다.
문제 해결을 위해 event.currentTarget과 event.target의 차이점을 보자
아래 이미지처럼 설정하면 우리가 클릭한 태그 철수, 이벤트 현재타겟은 영희가 나올것
- 이벤트 버블링은 아래에서 위로, 캡처링은 위에서 아래로. 캡처링은 디폴드값이 아니라서 이벤트값 조정해주어야 한다.
- 자식을 클릭했지만 부모가 클릭되게 이벤트를 위임.
이벤트 전파를 중지하는방법.
event.stopPropagation()로 이벤트 전파로 인해 버블링이 되는것을 중지할 수 있다.
💡 수업 퀴즈
지금 이상황에서 qqq4 누르면 어디로 갈까?? qqq1 로 간다. (난 qqq3으로 갈줄 알았는데 아니었다. 이유는 형제들이랑 상관없으니까) 그리고 체크박스 누르면 3->2->1 이렇게 가는데
우리는 이렇게 하기싫고 중간에 버블링 되는것을 중지하고 싶다면 위 이미지 const qqq4 처럼 함수 안에 event.stopPropagation(); 써주기!
💡 정리
이벤트 버블링이란, 이벤트를 실행 시켰을때 그 이벤트가 자식에서 부모 태그로 전파된다는 것
즉, 강의시간에 실습한 예시로 보면 부모 요소에 id값을 지정해두었는데, 이벤트가 전파되면서 자식 요소의 id를 가져와 id값이 존재하지 않았다.
이를 해결하기 위해 우리는 event.target.id가 아닌 event.currentTarget.id 를 사용하였고
currentTarget 을 통해 이벤트 전파의 시작점이 된 태그, 즉 이벤트가 걸려 실행되는 태그의 id를 선택한다는 것이었다!
또한, event.stopPropagation() 을 활용해 이벤트 전파를 막을 수도 있다.
2. eslint , prettier 설치했음
협업을 위해 우리는 어떤방식으로 코드를 적을건지 서로 약속을 해야한다.
- eslint
- prettier
- eslint-config-prettier
3개를 npm에서 다운받으면 된다.
eslint가 싫어하는애들 tsx 라서 리액트를 위에 임포트해주자
근데 모든파일에 그럼 다 리액트 해줘야하나?
근데 걍 우리끼리 규칙인거니까 규칙을 바꿔주자. 표준규칙을 사용했기때문에 이렇게 에러가 뜨는거라서
app 에서
임포트 타입 명시해줘야 한다.
만약 기능과 타입이 섞여있드면 나누어주어야 한다.
맨위에는 절대경로 쓰지 마라, 상대경로 해라 하는건데 밑에 자동수정 해도 된다. eslint는 "" 싫어해서
허스키
1. 엔피엑스 허스키 인스톨(허스키라는 폴더 만들어준다)
깃 훅스 인스톨드 뜰거임
2.
슬라이도 질문 (나만알아볼 수 있음..)
- 이벤트 타겟 아이디: 엑스버튼이 클릭되었을 때 함수가 실행 온클릭딜리트 라는 함수가 실행되겠다. 함수 안에서 삭제 뮤테이션이 실행 근데 어떤 아이디를 삭제할거야? 내가 지금 클릭한 이 댓글 아이디를 클릭할거야 . 가지고 오는 방법 id = {el.id} 바인딩 되어있는 id를 삭제할 수 있겠쥬
라우터 쿼리 보드아이디: 댓글이 현재 있는 상태에서 주소창 입력하는 곳이 있을거야 슬래시 보드 안에 해당 게시글 아이디가 들어가있겠지. (게시글아이디)
예를 들어 상세보기를 보여주기 위해서는 페치보드를 해야겠지
어떤 게시글 페치보드 할거야? 게시글 아이디를 보아야겠지. 그래야 그 게시글을 불러와서 (주소에 있는 아이디)클릭하면 해당 댓글의 아이디가 필요한거고 그래서 이벤트 타겟 아이디
클릭해서 수정한다. -> 라우터 쿼리 (주소에서 뽑아야하니까)
클릭없이 주소에서 수정/삭제 -> 이벤트 타겟
- 2번째 질문
리소스 낭비 차이
🤷🏻♀️ 궁금한 것
- playGround 보고 query,mutation 작성하는게 조금 어렵다. 플레이그라운드에 필수값이라고 느낌표 나와있는거는 무조건 다 적는게 아닌가? gql에 적어서 오류가 나는것도 있다. 다 빼버리면 오히려 에러가 해결될때도 있다. 거의 이문제때문에 나는 에러가 많이 나는 것 같다.
- 디폴트벨류와 벨류의 차이점은 알겠는데 인풋창 초기화 왜 value..?
❗️ 알게된 것
- 클릭 함수 안에 setWriter=("") 이렇게 공백 만든다음에 props로 넘길 수 있게끔 writer={writer} 묶어주고 프리젠터 파일에서 value값으로 writer 받으면 setWriter에서 설정된 공백이 들어와져서 인풋창이 초기화가 된다.
✨ 느낀점
와다다다다ㅏ다다 배우느랴? (머리에 쑤셔넣느랴 라는 표현이 더 맞겠다) 버겁고 이해가 안가던 것들이 조금은 알 것 같다. 주말에는 조금 여유가 있어서 블로그에 문제를 해결했던 방법이나 에러들을 정리하면서 코드를 쓰려고 노력했다. 이방법이 훨씬 훨씬 훨씬 좋다! 바로바로 정리되고, 내가 어떻게 코드 쓴건지 남으니까 기억에도 잘 남는 것 같다. 이전에 버튼 만들기랑 리스트 목록 보여준거는 어떻게했냐고 묻는다면... 어찌어찌 하니까 됬어요.. 라고 ㅎㅎㅎㅎㅎ 시간되면 또 정리해놔야지! 정말 열심히 살았다..
