[React] response.data 화면에 출력 안됨

현재 만들고 있는 페이지는 스터디기록으로 내가 구현하고 싶은건 calenderList의 값을 get axios 요청을 해 studyList 부분에 보여주는 것이다.

//기록 전체조회
  const getStudy = async () => {
    try {
      const access = localStorage.getItem('accessToken')
      const response = await axios.get(`${apiUrl}/calender`, {
        headers: { Authorization: `Bearer ${access}` },
      })
      setCalenderList(response.data)
      console.log(response.data)
    } catch (error) {
      alert('error');
    }
  }

그러나 response.state를 출력하면 200이 뜨는데 정작 화면에서는 보이지가 않았다😭😭😭
이전에 post페이지를 만드는것과 동일한 부분이라 틀린게 없는데 아무리 코드를 고쳐도 안나와서 너무 답답했다. 아무리 구글링을 해도 화면에 안나오는 이유는 없었음....

혹시 빈배열로 넘어와서 그런건가 싶어 console.log(response.data)를 해보았지만,

배열안에는 값들이 아주 잘 들어있다.... 분명 간단하게 했던건데 몇시간을 붙잡으니까 너무 빡쳐서 okky에 질문했는데

1. 빈배열이거나

2. get axios를 못하고 있거나

3. 불러오는 data가 배열이 아니거나

4. isArray가 잘못되었거나 라는 답변을 주셨다

한참을 고민하고 이전에 작성한 post 페이지의 response.data값도 console에 출력하여 비교하였다. 그러다가 마침내 다른 점을 찾았다😄😄

(정확하지는 않지만)
post : array(3) [{...},{...},{...}]
calenderList : calenderList: Array(3) [{...},{...},{...}]

이렇게 출력이 되었는데 post는 id값을 중심으로 요소들이 3개 있는 단순한 배열이었지만, calenderList는 calenderList라는 배열안에 요소들이 들어있었다. 따라서 response.data라고만 입력하면 calenderList까지 도달하지 않기때문에 값이 출력되지 않았던 것이다.

//기록 전체조회
const getStudy = async () => {
  try {
    const access = localStorage.getItem('accessToken')
    const response = await axios.get(`${apiUrl}/calender`, {
      headers: { Authorization: `Bearer ${access}` },
    })
    setCalenderList(response.data.calenderList) //이 부분을 수정
    console.log(response.data.calenderList)
  } catch (error) {
    alert('error');
  }
}

이렇게 resonse.data.calenderList까지 들어가야 data안에 있는 calenderList의 값을 출력하므로 정상적으로 홈페이지에 나타났다. 너무너무 고생했지만, response를 불러오는 부분에서 미세한 차이점으로 값이 달라질 수 있다는 것을 알게 되었다. 휴 다행이야