반응형

오늘 포스팅 할 내용은 JS에서 반복해서 HTML 태그를 출력해야하는 상황일 때 내장함수 map을 이용해 출력하는 것이다.

주의!!! new Map()을 통해서 선언하는 객체에 관한 설명이 아닌 배열에서 사용되는 map()메서드에 대한 설명이다.

 

목차

 

글을 작성하는 이유와 나의 경험

개발을 처음 해보면서, 특히 프론트엔드 개발을 처음 하는 사람이라면 HTML, CSS, JS로 시작할 텐데 이 부분이 아무것도 모르고 사용하면 꽤나 어렵다. 그 중 나를 비롯한 수 많은 사람들이 겪는 문제는 바로 반복해서 출력하는 것에 대한 어려움이다.

예를 들어 우리가 투두리스트 페이지를 만들면서 화면에 이 리스트들을 출력한다고 가정해보자. "자바스크립트 공부하기", "리액트 공부하기", "뷰 공부하기", "스벨트 공부하기", "깃 공부하기", "깃허브 공부하기", "깃랩 공부하기", "젠킨스 공부하기", "싸이프레스 공부하기", "노드js 공부하기" 라는 리스트가 있을 때 이것들을 모두 출력하려면 HTML을 이용한다면 이런 코드가 필요할 것이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>오늘의 투두 리스트!!</h2>
    <ul>
      <li>자바스크립트 공부하기</li>
      <li>리액트 공부하기</li>
      <li>뷰 공부하기</li>
      <li>스벨트 공부하기</li>
      <li>깃 공부하기</li>
      <li>깃허브 공부하기</li>
      <li>깃랩 공부하기</li>
      <li>젠킨스 공부하기</li>
      <li>싸이프레스 공부하기</li>
      <li>노드js 공부하기</li>
    </ul>
  </body>
</html>

이렇게 총 10개의 li태그를 일일이 작성해주면 된다. 어렵지 않고 잘 된다.

실제로 위 HTML을 웹에 띄워보면 아래와 같이 매우 깔끔하게 출력이 잘 된다.

HTML 코드 웹 화면 결과

하지만 실제로 웹개발을 하면서 우리가 마주하는 문제는 이렇게 단순하지 않다.

기본적으로 데이터가 정적이지 않고 동적이다. 매번 그 길이와 크기가 바뀐다. 실제로 프로젝트를 한 사람이라면 길이와 목록이 천차만별인 것을 확인할 수 있을 것이다. 나 또한 학교에서 경험한 2번의 프로젝트와 지금 데브코스에서 경험하는 프로젝트들에서 그런 문제점을 많이 겪었었고 이러한 출력을 잘 다룰 수 있는 방법이 필요했다.

map() 메서드를 이용한 해결방법

이러한 상황에서 가장 기초적이고 간단한 해결방법은 바로 JavaScript를 이용하는 것이고 그 JavaScript가 가진 기능들을 활용하는 것이다. 오늘은 그 중 map() 메서드에 대해서 이야기해보고자 한다.

 

아래는 공식 mdn 문서로서 해당 문법에 대한 설명이 자세하게 나와있다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

Array.prototype.map() - JavaScript | MDN

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

developer.mozilla.org

공식 문서를 인용하자면 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 함수이다. 예시를 들어서 설명해보고자 한다.

const array = ['가', '나', '다'] //배열
array.map((value) => console.log(value)); //map()메서드 사용

위와 같은 배열이 있고 여기에서 map() 메서드를 사용하면 

출력 결과

이렇게 배열의 값을 하나씩 순서대로 출력해준다.

여기서 map((value) => console.log(value)); 라는 코드에서 value는 현재 값을 나타내준다.

즉 map()메서드가 실행되면 배열의 첫 번째 값부터 마지막 값까지 순회하는데 그 순회하는 값을 임의의 value라는 곳에 할당하고 화살표 함수 다음에 나오는 코드로 실행시킨다.

좀 더 풀어서 위 코드를 설명하자면

map 메서드가 실행되면 array의 첫 번째 값인 '가'를 value에 할당한다. 그다음 화살표 다음에 있는 코드인 console.log(value)를 실행해서 이번 value인 '가'가 출력된다. 그리고 그 다음에는 아무것도 없으므로 다음 값으로 넘어간다.

array의 두 번째 값인 '나'를 value에 할당한다. 그다음 화살표 다음에 있는 코드인 console.log(value)를 실행해서 이번 value인 '나'가 출력된다.

array의 마지막 번째 값인 '다'를 value에 할당한다. 그다음 화살표 다음에 있는 코드인 console.log(value)를 실행해서 이번 value인 '다'가 출력된다.

이러한 순서로 진행되는 것이다.

for문과의 비교

다른 문법에서도 흔히 사용되는 for문과의 비교이다. 물론 for 문을 써도 상관없고 array.length를 써도 되지만 코드의 가독성과 간편함을 위해서 쓰는 경우가 많다. 특히 반복에서 출력해줘야하는 경우가 많을 때는 일일이 for문을 사용하기보다는 map()을 통해 간단하게 할 수  있다.

 

인덱스를 포함한 추가적인 내용

더보기

심화과정

2,3 번째 인자까지 입력한 경우

map() 메서드는 총 3개의 인자를 받을 수 있는데 첫번째 인자는 현재 배열의 값을 가리킨다. ex)가, 나, 다
두 번째 인자는 현재 배열의 인덱스 값을 가리킨다. array[0], array[1] 할때 0, 1을 말한다. ex)0, 1, 2
세 번째 인자는 현재 배열의 원본 배열을 리턴해준다. 위 캡쳐본에서 볼 수 있듯이 원본 배열이 출력되고 있다. 

그럼 이제 HTML과 JS에서 map() 을 써보자!

여기서 추가적으로 알아야 하는 문법 2가지!!
템플릿 리터럴(백틱)과 join() 메서드

 

템플릿 리터럴 공식 문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

 

Template literals - JavaScript | MDN

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문

developer.mozilla.org

윈도우 기준 맨 왼쪽 esc아래, 숫자 1번 키 왼쪽에 있는 키이고 맥북은 option + ₩을 눌러야 한다.

이 문법은 문자열 안에 표현식을 삽입할 수 있게 해주는 문법이다. 더 쉽고 이해하기 편하게 말하면 문자열 안에 변수나 함수를 집어넣어 출력식을 다양하게 해줄 수 있다는 것이다. 예를 들어

const sojuso = '블로거'
console.log(`${sojuso} 입니다`)
// 출력
// 블로거 입니다

이렇게 사용할 수 있다.

 

join() 메서드 공식 문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

 

Array.prototype.join() - JavaScript | MDN

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.

developer.mozilla.org

배열을 하나의 문자열으로 합쳐주는 문법이다. join(인자) 메서드에 넘겨주는 인자 기준으로 함수를 문자열로 합쳐준다.

이 과정을 거치지 않으면 아래 첫 번째 예시처럼 콤마가 출력되기에 이러한 과정을 거쳐주어야 한다.

const array = ['안녕하세요', '저는', '블로그 주인장 sojuso', '입니다']

console.log(array.join())
// 출력
// 안녕하세요,저는,블로그 주인장 sojuso,입니다

console.log(array.join(""))
// 출력
// 안녕하세요저는블로그 주인장 sojuso입니다

console.log(array.join(" "))
// 출력
// 안녕하세요 저는 블로그 주인장 sojuso 입니다

 

 

이제 이런 지식을 바탕으로 작성한 코드를 보면 다음과 같다.

const $target = document.querySelector(".js");

const arr = [
  "자바스크립트 공부하기",
  "리액트 공부하기",
  "뷰 공부하기",
  "스벨트 공부하기",
  "깃 공부하기",
  "깃허브 공부하기",
  "깃랩 공부하기",
  "젠킨스 공부하기",
  "싸이프레스 공부하기",
  "노드js 공부하기",
];

$target.innerHTML = `
	<h2>자바스크립트 투두 리스트!!</h2>
	<ul>
		${arr.map((value) => {return `<li>${value}</li>`;}).join("")}
	</ul>
`;

우선 정보를 담은 배열 arr을 선언했다. 이후 querySelector을 통해서 js라는 클래스를 가진 태그를 가져오고 해당 태그에 innerHTML에 백틱을 통해서 값을 삽입해주었다. ul태그 내부에서 map 메서드를 통해서 arr 값이 순회되며 li로 감싸져서 ul태그에 추가된다.

이제 출력 결과를 확인해보자

출력 결과

동일한 결과가 출력되었다!!

이렇게 여러 문법이랑 메서드를 사용해서 출력을 간소화할 수 있다. 만약 이러한 출력이 한두개면 상관이 없지만 100개 이상되고 재사용해야하는 경우가 많아진다면 이렇게 map()을 통해서 구현할 수 있다. 처음에는 꽤나 어려웠는데 하다보니 원리가 이해되고 오늘 포스팅을 작성해보았다. 이 글을 보는 사람들도 잘 이해할 수 있었으면 좋겠다. 전체 코드를 첨부했으니 참고가 되었으면 좋겠다.

전체 코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>오늘의 투두 리스트!!</h2>
    <ul>
      <li>자바스크립트 공부하기</li>
      <li>리액트 공부하기</li>
      <li>뷰 공부하기</li>
      <li>스벨트 공부하기</li>
      <li>깃 공부하기</li>
      <li>깃허브 공부하기</li>
      <li>깃랩 공부하기</li>
      <li>젠킨스 공부하기</li>
      <li>싸이프레스 공부하기</li>
      <li>노드js 공부하기</li>
    </ul>
    <div class="js"></div>
    <script src="./index.js"></script>
  </body>
</html>

index.js

const $target = document.querySelector(".js");

const arr = [
  "자바스크립트 공부하기",
  "리액트 공부하기",
  "뷰 공부하기",
  "스벨트 공부하기",
  "깃 공부하기",
  "깃허브 공부하기",
  "깃랩 공부하기",
  "젠킨스 공부하기",
  "싸이프레스 공부하기",
  "노드js 공부하기",
];

$target.innerHTML = `
	<h2>자바스크립트 투두 리스트!!</h2>
	<ul>
		${arr.map((value) => {return `<li>${value}</li>`;}).join("")}
	</ul>
`;

모든 자료는 제가 직접 만들었고 상업적 용도를 제외한 모든 용도로 사용하셔도 됩니다.
또한 문제점이나 보완할 점이 보인다면 언제든지 댓글로 알려주세요. 바로 수정하겠습니다.

반응형
저작자표시 비영리 변경금지

'개발 > Javascript' 카테고리의 다른 글

GitHub README에 기술 블로그 최근 글 자동으로 업데이트 시키기  (1) 2024.05.22
자바스크립트 console.log()에 대한 고찰  (0) 2024.05.18
백준 JS 코테 파일을 자동 생성 스크립트로 만들어보자!  (0) 2024.05.07

티스토리툴바