map()을 통해 li 생성할때 발생한 문제

export default class App extends Component {
  constructor() {
    super({
      state: {
        fruits: [
          { name: 'Apple', price: 1000 },
          { name: 'Banana', price: 2000 },
          { name: 'Cherry', price: 3000 },
        ],
      },
    })
  }
  render() {
    console.log(this.state.fruits)

    this.el.innerHTML = `
      <h1>Fruits</h1>
      <ul>
        ${this.state.fruits.map((fruit) => `<li>${fruit.name}</li>`).join('')}
      </ul>
    `
  }
}

왜 .join()을 사용했을까?

• Array.prototype.map 메소드를 통해 생성된 배열의 모든 요소를 하나의 문자열로 병합하기 위해서

• map 메소드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 결과를 새 배열로 반환

map 메소드가 반환하는 것은 배열이기 때문에, 이 배열을 직접 HTML로 삽입하려고 하면 쉼표로 구분된 요소들이 문자열 형태로 나타납니다.

• .join('') 메소드는 배열의 모든 요소를 하나의 문자열로 병합할 때 사용
• 인자로 주어진 문자열을 각 요소 사이에 삽입
  .join('')에서 빈 문자열 ''을 인자로 제공하면, 배열의 모든 요소가 쉼표 없이 바로 이어서 하나의 긴 문자열로 병합
• , 가 사라진다