일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 안드로이드 스튜디오
- HTML
- 코딩테스트
- 백준구현
- CSS
- 프로그래머스JS
- 자바스크립트
- 백준js
- 리액트
- 알고리즘
- 프로그래머스코테
- JS프로그래머스
- dp알고리즘
- 익스프레스
- 백준골드
- 백준알고리즘
- 몽고DB
- 백준nodejs
- 프로그래머스
- 코테
- js코테
- JS
- 리액트커뮤니티
- 포이마웹
- 백준구현문제
- 리액트댓글기능
- css기초
- 다이나믹프로그래밍
- HTML5
- 백준
- Today
- Total
목록리액트댓글 (3)
개발새발 로그

이제 댓글을 삭제하는 기능을 추가해보자 댓글 삭제는 이전 post삭제 기능과 유사하다. 필요한 기능 클라이언트 1. 삭제 버튼을 클릭하면 댓글을 삭제하는 함수 deletehandelr 필요함 2. 삭제 함수는 window.confrim기능을 사용 (true면 삭제 수행) 3. 삭제 요청할 때는 repleId와 postId를 보내줘야함 4. 삭제 요청후 완료 하면 새로고침을 window.location.reload()로 수행해줌 서버 1. /delete API 작성 2. Reple DB에 deleteOne 명령어 repleId를 이용해 수행 3. 삭제를 수행하고 Post의 repleNum을 감소시켜줘야함 -postId를 이용해서 해당 게시글을 찾고 repleNum을 업데이트 해줘야함

이제 댓글을 수정하는 기능을 추가해보자 필요한 기능 1. 댓글 수정 버튼을 누르면 댓글을 수정하는 컴포넌트를 띄워야함 -EditFlag라는 state를 선언해서 수정버튼을 누르면 댓글 수정 컴포넌트를 보여줌 -수정버튼을 누르면 EditFlag가 true가 되고 수정 컴포넌트가 띄워짐 -setModalFlag로 모달폼은 닫아줌 -댓글 수정 컴포넌트에 취소버튼을 추가해서 취소를누르면 다시 EditFlag를 false로 만들어줌 2. 댓글 수정을 눌렀을 때 이전 댓글의 데이터를 가져와야함 -Reple이라는 state의 초기값을 빈문자열이 아니라 props로 넘겨준 이전 댓글데이터로 설정해준다. 3. 댓글 수정 버튼을 눌렀을 때 /edit 이라는 API로 서버에 업데이트 요청을 해야한다. -서버에 업데이트 요청..

현재 댓글 컴포넌트는 이런 상황이다. 1. 먼저 ··· 버튼을 눌렀을 때 수정, 삭제 버튼이 있는 모달 폼을 열어줘야한다. 모달 폼의 css는 아래와 같다. 2. 만약 다른 곳을 클릭했을 때 모달폼이 다시 닫히도록해야하는데 이때 useHooks인 useOnclickOutside를 사용한다. useOnclickOutside 사용방법 1. useRef를 이용해서 만약 클릭이벤트가 useRef로 지정한 컴포넌트나 useRef에 포함된 컴포넌트라면 return 2. 만약 다른 것을 클릭했을 때 handler함수실행 3. 이 useEffect이벤트가 계속 발생될 수 있도록 mouseDown이나 touchStart를 계속 실행시켜준다. -touchstart는 모바일에서 발생하는 이벤트 - 이 이벤트가 계속 실행되면..