[JS]아랍어 단어장 페이지 만들기-2.단어 Data 출력하기

CHO WanGi·2023년 5월 13일

Javascript

목록 보기

4/20

계획

단어 데이터는 Home(메인)에는 모든 품사를,
Noun 에는 명사만을 출력할 예정이다

1. 전체 단어 데이터 출력하기

단어 데이터를 받아와서 출력하는 기능을 담당할 WordList 컴포넌트를 제작했다.

~~헤헤 역시 뭔가 만들어봐야 한다~~

import { CoreCompoent } from "../core/coreComponent";
import { DATA } from "../worddata";

export default class WordList extends CoreCompoent {
  render() {
    const data = DATA
    this.el.innerHTML = /* html */`
      <div class="word">
        <ul>
        ${data.map( function (element) {
            return `<li>${element.single} : ${element.mean}</li>`
            }).join('')}
        </ul>
      </div>
    `
  }
}

1. Map 함수

callback 함수를 실행한 결과를 가지고 새로운 배열을 만들때 사용

🚨 Foreach 를 사용하지 않고 map 함수를 사용한 이유

사실은 foreach를 먼저 썼다가 아무것도 안나와서 map을 써봤는데 작동했다....^^

그래도 왜? 를 알아봐야하기에...

그 답은 둘의 차이점에 있다.
foreach와 map 메서드 둘다 배열의 모든 요소를 순회하면서,
인수로 전달받은 callback 을 반복 호출하는 것은 동일하지만,

차이점은 map 메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
foreach는 새로운 배열을 반환하지 않는다

이말인 즉슨 내가 출력할 값을 리턴을 받아서 그 리턴값을 this.el 안으로 집어 넣어야 하는데
foreach 는 콜백 함수를 호출만 할뿐, 리턴값을 주지 않는다.

If 만약 foreach를 쓴다면...?

이렇게 반환값이 undefined로 나타난다

그리고 join("") 메소드를 사용하여 배열 요소의 구분이 콤마(,)로 되어있던걸, 없애서 콤마랑 같이 출력되지 않도록 했다.

2.명사 & 동사 데이터만 출력하기

전체 데이터 출력 방식에서 filter() 메소드만 추가했다.

import { CoreCompoent } from "../core/coreComponent";
import { DATA } from "../worddata";


export default class Noun extends CoreCompoent {
  render(){
    const data = DATA
    this.el.innerHTML = /* html */`
      <h1> Noun Page</h1>
      <div class="word">
        <ul>
        ${data
        .filter(data => data.part === "noun")
        .map(function (element) {
            return `<li>${element.single} : ${element.mean}</li>`
            }).join('')}
        </ul>
      </div>
    `
  }
}