23-06-06 T.I.L innerHTML과 map

문제설명

한 방법의 코드가 아니라 다른 방식의 코드로 같은 기능을 구현하고자 한다.

나는 보통 템플릿(${})을 HTML에 붙힐 때 append와 forEach()를 사용하지만 이번에는

innerHTML과 map()으로 그 기능을 구현하고자 한다.

시도

나는 특정한 id값을 가지고 있는 객체만을 추출해서 배열로 만들고 싶다.

그래서 일단은 모든 데이터 값을 get한다.

    const bannerImg = {
      method: "GET",
      headers: {
        accept: "application/json",
        Authorization:
          "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NmQ2MDljY2M4YTk2OGQ4NmY3MDY5MGE5MmU3ZWMwMCIsInN1YiI6IjY0NzA4YTIwNzcwNzAwMDExOTI0ODFmYyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.5NjHTZbzSO0wzPIHy0BTBCKG3LvrIYUl4GMa0h1E5VE",
      },
    };

    fetch(
      "https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1",
      bannerImg
    )
      .then((response) => response.json())
      .then((data) => {
        const rows = data["results"];

단순히 영화 api를 따왔다. 원래라면 여기서 forEach를 사용해서 원하는 값을 노드데이터에서 추출하는 방식이었지만 이번에는 다르게 한다. 먼저 특정한 id값을 가진 데이터를 추출해야하기 때문에 filter()를 사용해서 값을 얻는다.

const movie1 = rows.filter(data => data.id == 238);

id값이 238인 데이터를 얻었다. 이제 innerHTML과 map을 사용해서 원하는 장소에 붙히기만 하면 된다.

해결

 const bannerImg = document.querySelector(".movieBanner");

먼저 querySelector로 붙히고자 하는 장소를 정한다.

 bannerImg.innerHTML = movie1.map(
          (movie1) => `<img src="https://image.tmdb.org/t/p/w500${movie1.poster_path}" class="bannerImg" alt="${movie1.title}">
                      `)

그리고 bannerImg.innerHTML은  bannerImg에 할당된 html을 붙힐 수 있다.

movie1은 내가 얻고자 했던 데이터 배열이다. map은 원래의 배열에 있는 요소를 새로운 값으로 만들고 그것을 배열화하는 기능을 가지고 있다. movie1의 모든 데이터를 사용하는 것이 아니라 내가 원하는 값만을 가지고 원하는 기능을 구현했다.

알게된 점

forEach()는 요소가 많을 수록 완료까지의 시간이 오래 걸린다. 의미 없이 처음부터 끝까지 반복하기 때문이다.

하지만 map()을 사용하면 쓸데없는 반복의 시간을 단축시키면서 내가 원하는 기능을 똑같이 구현할 수 있다.

 forEach()를 써야할 때는 써야하지만 안 써도 기능을 구현할 수 있을 때는 다른 효율적인 방법으로 접근을 하면 좋을 것 같다.