리액트에서 axios사용 질문드립니다.

[형산]

-----------서버코드입니다----------------

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

      res.send(결과);
    });
});

 

-----------리액트코드입니다----------------

( App.js)

function App() {
  const [test, setTest] = useState([]);

  useEffect(() => {
    axios
      .get("/title")
      .then((res) => {
        console.log(res.data);
        setTest(...test, ...res.data);
        console.log(test);
      })
      .catch(() => {
        console.log("실패");
      });
  }, []);

.

.

보다 시피 콘솔에   console.log(res.data); 는 데이터 값이 들어온것을 확인할 수 있습니다.

근데   setTest(...test, ...res.data);
        console.log(test);

test라는 state값에 axios를 통해 들어온값을 설정해주었는데 콘솔에 [ ] 라고 빈값이 찍혀들어옵니다.

axios를 통해 받은 데이터를 state에 저장하는 방법이 위코드에서 잘못된 부분이 있나요 ???

[codingapple]

데이터는 test에 잘 들어있을걸요

그냥 console.log(test)가 setTest() 보다 먼저 실행되서 그런듯 합니다 

[형산]

아아.. 이거 강의에서 배운 내용이었는데, 깜빡했군요

그래서 수정해봤는데 문제가 하나 생겼습니다.

setTest(...test, ...res.data);
console.log(test);

▲ console.log(test); 이 부분을

useEffect(() => {
    console.log(test);
  }, [test]);

▲ useEffect로 위에 빼서 setTest(...test, ...res.data); 이후에 실행되도록 해주었습니다.

그랬더니

test에 데이터가 들어오긴했는데 _id:37인 가장 첫번째의 데이터만 들어오고, 나머지 19개의 데이터는 들어오지 않습니다.

 

[형산]

아 .. 이부분은 해결했습니다

아 이부분은      

  const [test, setTest] = useState(null);로하고

  setTest(...test, ...res.data); 부분을 setTest(res.data);로 바꾸니 전체 데이터가 들어오는군요.

근데 이 받아온 데이터를 화면에 출력하고싶은데

{test === true ? { test } : null} 우선 이렇게 해봤는데.. 아무것도 뜨지않습니다. 무엇이 문제일까요 ?

 

[형산]

휴 구글링 하다보니 해결했습니다 ! 코딩이 쉽지않군요.. ㅠ

[codingapple]

test라는 변수를 true와 비교하는게 아니라 null이랑 비교하면 되겠군요 

[글쓴이]

글