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

[장경민]

안녕하세요.

리액트에서 몽고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 페이지로 변경이되면 서버 요청이  되지않는것같은데

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

 

 

 

 

[codingapple]

get요청시

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

[글쓴이]

글