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

Question

이번 강의에서 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를 통해 새롭게 값을 받으면 컴포넌트가 다시 랜더링되어 클라이언트 화면에 보여지게 된다. --------------------------------------------------------- 이렇게 결론을 내봤는데 그랩 님 고견은 어떠신지..ㅜㅜ 완전 입문자라 구글링 해봐도 어려운 내용들이 많아서 저처럼 이런 기본적인 글은 없더라구요;;; 그랩 님 강의 잘 듣고 있습니다 감사합니다!

그랩 · Answer

좋은 고민을 하셨네요! 고민하신 내용이 일치합니다. 일반적으로 array 자료형은 map이라는 메소드를 사용할 수 있습니다. 하지만 int나 null 같은 다른 자료형에서는 사용이 불가능합니다. 3.map(...), null.map(...) 같이 사용하게 되면 에러가 나게 됩니다. 리액트 컴포넌트가 서버에 요청을 하게됐을 때 비동기 처리이기 때문에 기다리지 않고 렌더링을 이어서 하게 됩니다. 그때 null을 기본 값으로 넣어주면 에러가 나기 때문에 빈 배열 []을 넣어줘서 에러를 안나게 할 수 있는 겁니다~!!