map()

• 배열함수로 반환값을 배열에 담아 반환한다.
• 원하는 데이터만 가져오고 싶을 때 자주 쓰인다.
• map함수의 첫번째 인자에는 아이템이, 두번째에는 인덱스값이, 세번째에는 배열값이 담겨있다.

<script>
	/*arr.name.map( (item, idx, arr ) => 
		return ( <대상 key={item.id}>{item.name}</대상> )} */
	name.map((item)=>{
    	return item  /* 반드시 array를 리턴한다! */
        })
</script>

문제발생

상황

영화플랫폼사이트를 만들기위해 리액트로 프로젝트를 진행중에있었다. 영화메인까지는 강의를 들으면서 수월하게 구현했고 이제 영화 상세페이지를 만들차례다. 어째어째 구글링하면서 모르는건 해결하던 중에 map함수로 api데이터중 장르들을 불러오는데 자꾸 알수없는 에러가 났다. npm start로했을때에는 에러가 안떠 리액트 앱이 떴지만 리뷰가 안보였다. 콘솔창으로 확인해보니 코드에 오류가 나있었고 오류내용은 이러했다.

uncaught typeerror: cannot read properties of undefined (reading 'map')

생각해보니 자바스크립트 프로젝트중에서도 map함수를 이용할 때가 있었는데 그때도 이런 오류가 나었다. 하지만 그때는 벨로그를 쓰고있지않았을때라 기록을 안해둔것....그것이크다...

해결과정

왜 오류가 난것인지 파악부터 해야한다.

api는 잘 담겨져있나?

먼저 api가 객체에 잘 저장되어있는지 확인했다.

<script>
	  const [movies,setMovies]=useState([])
      const {id} = useParams();
      console.log("영화번호",id)


      const getMoviesDetail=async()=>{
        let url=(`/movie/${id}?api_key=${API_KEY}&language=en-US`)
        let response = await api.get(url)
        let data = response.data;
        console.log("디디디테일",data)
        setMovies(data)
        console.log("영화디테일?",data)
  }
</script>

api는 잘담아졌다.

코드 확인

<script>
 	<div>{movies.genres.map(<Badge bg="danger">{movies.genres.name}</Badge>)}</div>
 </script>

문제의 코드다. 일단 형식부터 틀렸었다. map은 함수이기때문에 아이템(인자)에서 리턴값으로 작성해야하는데 나는 리턴값만 적었다. 사실 인자를 어떻게 지정해야할지몰랐다.

<script>
	<div className='genres'>{movies.genres.map((genre) => <Badge bg="danger">{genre.name}</Badge>)}</div>
</script>

배열의 name키의 값들을 불러와야한다. 결과를 확인하는데 또 같은 에러가 났다. 새로고침을 해보니 장르는 성공적으로 불러왔다. 그럼 이알수없는 에러는 어떻게 해결할까..

optional chaining

여러 단계로 이루어진 객체를 탐색할 때는 항상 TypeError가 발생할 확률이 생기는데 이를 방지하기위해 방어 로직을 넣는 기능이다.
콘솔창을 여러번 확인한 결과 api가 불러와지기전에 렌더링이 되어 빈배열을 렌더링하여 에러가 난것이다.

<script>
	<div className='genres'>{movies.length>0&&movies.genres.map((genre) => <Badge bg="danger">{genre.name}</Badge>)}</div>
</script>

처음에 &&연산을 넣어줘도 빈배열로 받아져서 .length>0로 조건을 더걸어주었다.

해결

결과

성공적으로 장르가 불러와졌다!
(스타일은 리액트부트부스트랩을 이용했다.)

마무리

배열함수는 자바스크립트를 할때 유심히 공부했던 것이 기억이 나는데 그새 잊고 활용을 못해 현타가 왔다. 더 열심히해야하는 부분인것같다. 그리고 같은에러에 애먹었은 시간이 아까워 이제부터 문제 및 오류 해결과정을 잘 기록해둬야겠다 생각했다.