Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 |
Tags
- 코테
- HTML
- 백준nodejs
- 리액트커뮤니티
- 리액트댓글기능
- 백준알고리즘
- css기초
- JS
- 포이마웹
- dp알고리즘
- 프로그래머스
- 몽고DB
- 리액트
- js코테
- 백준
- 자바스크립트
- 백준골드
- 코딩테스트
- 알고리즘
- HTML5
- 프로그래머스JS
- 안드로이드 스튜디오
- 프로그래머스코테
- 다이나믹프로그래밍
- 익스프레스
- JS프로그래머스
- CSS
- 백준구현문제
- 백준구현
- 백준js
Archives
- Today
- Total
개발새발 로그
React, Express : 댓글 불러오기 본문
댓글을 DB에 저장했으면 이제 댓글을 불러와보자
RepleList
1. useEffect에서 axios요청을 해 댓글 데이터를 가져온다.
2. 이때 PostArea 컴포넌트에서 props로 가져온 postId로 데이터를 찾을 것이다.
3. 댓글 리스트를 가져오는 axios요청을 작성하고 요청한다.
4. 댓글리스트를 저장하는 배열 state를 선언하고 요청에서 받아오면 저장해준다.
5.그리고 받아온 repleList를 map으로 뿌려준다.
server/Router/reple
1. getReple API를 작성해준다.
2. Reple을 클라이언트에서 보내준 postId를 이용해 postId로 저장된 댓글들을 모두 불러온다.
📝추가적인 부분
1.댓글을 작성하고 등록하면 새로고침이 되어야 댓글들이 나타나게된다.
-이를 위해 repleUpload.js에서 작성 후 댓글 등록버튼을 누르고 작성이 성공할 때 window.location.reload()를 수행한다.
2. 로그인을 했을 때만 댓글을 등록할 수 있도록 로그인안했을 때 댓글 작성할 수 있는 컴포넌트를 안보이게 한다.
728x90
반응형
LIST
'MERN' 카테고리의 다른 글
React, Express : 댓글 수정 기능 (0) | 2023.06.30 |
---|---|
React : 댓글 수정,삭제 모달폼 - useRef,useOnclickOutside, useClickAway(useHooks) (0) | 2023.06.30 |
React, Express, 몽고DB : 댓글 등록 기능 (0) | 2023.06.29 |
React, Express, MongoDB : 댓글기능 환경 구축 (0) | 2023.06.29 |
React, Express : 회원가입 닉네임 중복검사 (0) | 2023.06.29 |