핵심 방법: .data() 메서드 활용
JavaScript에서 배열에 담긴 모든 값을 웹 페이지의 <p> 태그에 한 번에 표시하려면 D3.js의 .data(anyArrayObject) 메서드를 활용하는 것이 가장 간편합니다. 이 메서드는 배열의 각 요소를 DOM 요소에 바인딩(결합)해 주기 때문에, 반복문 없이도 데이터 개수만큼 자동으로 태그를 생성하고 값을 출력할 수 있습니다.
다음은 전체 예제 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<script>
const arrayValues = [1000000001,"John","Smith",100, 200, 3000]
var originalData = d3.select("body").selectAll("p")
.data(arrayValues)
.enter()
.append("p")
.text(function(allValuesOfArray){
console.log(allValuesOfArray+" ");
return allValuesOfArray;
})
</script>
</body>
</html>코드 동작 원리
위 코드의 핵심 로직을 단계별로 살펴보면 다음과 같습니다.
1. 데이터 선택: d3.select("body")로 body 요소를 선택한 뒤, .selectAll("p")로 문서 내 모든 p 태그를 대상으로 지정합니다.
2. 데이터 바인딩: .data(arrayValues)가 숫자와 문자열이 혼합된 배열을 각 p 태그에 연결합니다.
3. 요소 생성: .enter()는 데이터 개수보다 부족한 DOM 요소를 감지하고, .append("p")가 부족한 만큼 새로운 p 태그를 자동으로 추가합니다.
4. 텍스트 출력: .text() 콜백 함수가 배열의 각 값을 받아 화면에 렌더링하며, 동시에 console.log()로 콘솔에도 기록합니다.
실행 방법
위 프로그램을 실행하려면 코드를 anyName.html(또는 index.html)로 저장한 후, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 됩니다. Live Server 확장 프로그램이 설치되어 있지 않다면, 저장된 HTML 파일을 브라우저에서 직접 열어도 동일하게 확인할 수 있습니다.
실행 결과
브라우저에서 실행하면 배열의 여섯 개 값인 1000000001, John, Smith, 100, 200, 3000이 각각 별도의 p 태그로 나뉘어 화면에 순서대로 표시됩니다. 개발자 도구(F12)의 콘솔 창에서도 동일한 값들이 출력된 것을 확인할 수 있습니다.