useState의 기본값이 null과 []일 때에 대해서

이번 강의에서 useState를 사용하다가 문득 궁금증이 생겻습니다.

function ProductPage() {
  const { id } = useParams();
  const [product, setState] = useState(null);

상품상세페이지를 구현한 코드에서 useState(null)로 기본값을 null을 주었습니다.

function MainPage() {
  const [products, setProducts] = React.useState([]);
  const [banners, setBanners] = React.useState([]);

그런데 메인페이지를 구현한 코드에서 useState([])와 무슨 차이가 있을까 궁금해서 실습을 해봤습니다.

function MainPage() {
  const [products, setProducts] = React.useState(null);
  const [banners, setBanners] = React.useState(null);

그 결과 이런 오류가 떴고 나름 혼자서 여러번 고민해 본 결과

---------------------------------------------------------

axios에서 통신을 하는 동시에 banners.map 처리를 하는 과정에서 banners가 기본값 null을 가지고 있는 상태기 때문에 map 메소드를 사용할 수 없다.

따라서 비동기 처리가 원인이고 banners의 기본값으로 빈 배열을 할당해 줘야 banners.map을 처리하는 과정에서 오류가 나지 않고 이후에 axios 통신이 끝나고 setBanners를 통해 새롭게 값을 받으면 컴포넌트가 다시 랜더링되어 클라이언트 화면에 보여지게 된다.

---------------------------------------------------------

이렇게 결론을 내봤는데 그랩 님 고견은 어떠신지..ㅜㅜ

완전 입문자라 구글링 해봐도 어려운 내용들이 많아서 저처럼 이런 기본적인 글은 없더라구요;;;

그랩 님 강의 잘 듣고 있습니다 감사합니다!

인프런 커뮤니티 질문&답변