• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 몽고 DB 에 저장한 데이터 리엑트 로 불러오기

몽고 DB 에 저장한 데이터 리엑트 로 불러오기

2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 글쓴이
  • #25150

    장경민
    참가자

    안녕하세요.

    리액트에서 몽고DB 로 데이터 전송한 값을 받아와서 출력하고싶어 테스트 중입니다.

    post 요청을 하여 데이터가 전송되는것은 확인하였습니다.

    이제 GET 요청으로 HTML 에 출력하고싶은데 해결이되지않아 질문드려요

    일단 list.js 파일에 list 컴포넌트를 만들고

    app.js 로 import 하고

    route 를 이용하여

     <Route path="/list" >
     <List/>
     </Route>

    경로가 /list 일때만 컴포넌트가 보여지게 하였습니다. 

    그리고 axios 로 get 요청을 받아오라고 작성하고

    sever.js 에도 /list 로 get 요청을 하면 데이터를 전송하라고 작성 하였습니다.

     

    //app.js

      let [응답값, 응답값변경] = useState([]);

        useEffect(() => {
       
            axios
              .get("/list")
              .then((res) => {
                응답값변경(...응답값,...res.data);
                console.log(res.data);
              })
              .catch(() => {
                console.log("실패");
              });
          },[]);

    //sever.js  

    app.get("/list", function (req, res) {
      db.collection("post").find().toArray((에러, 결과) => {
          console.log(결과);
          res.send(결과);
        });
    });

     

     

    이제 주소창에 /list 로 직접 검색하여 get 요청을 해보면 아래 이미지처럼 데이터가 출력됬습니다.

    하지만 상단 navbar 에 list 라는 메뉴를 하나 만들고 

     <Nav.Link as={Link} to="/list">list</Nav.Link> 링크설정후 클릭하여 

    주소경로 /list 페이지로 변경이되면 서버 요청이  되지않는것같은데

    이럴경우 해결방법이 무엇인지 질문드립니다,..

     

     

     

     

    #25178

    codingapple
    키 마스터

    get요청시

    http://localhost:8080/list로 요청하라고 풀주소를 적어봅시다

2 글 보임 - 1 에서 2 까지 (총 2 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠