[JS/class] 클래스로 컴포넌트 구현하기 1 - 컴포넌트 생성

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌

 

💬 포트폴리오 사이트를 자바스크립트로 작업하면서 라우팅에 막혀 엄청 헤맸는데, 결국은.. SPA로 만드는 것이 답이었다는 것을..🥲 일단 강좌 보면서 어떤 식으로 구성이 되는지 파악하고, 다시 내 프로젝트에 적용시켜 보기로 하였다.

 

1. class 구조

class User {
  constructor(매개변수1, 매개변수2..) {
    // 함수 역할
    // 로직
  }
  메서드명() {
    return 로직;
  }
}

 

2. 컴포넌트 생성(SPA 방식)

1. index.html의 <div id="root"></div> 안에 모든 내용이 그려진다.
2. id가 root인 div 요소 안에 생성자 함수로 사용할 수 있는 클래스 개념 추가
3. 공통으로 사용할 수 있는 core 개념의 클래스 생성 필요
4. core 클래스를 상속받은 컴포넌트 생성하여 활용
5. 데이터를 여러 컴포넌트에서 사용할 수 있도록 store 개념의 생성자 함수 생성 필요

 

2-1. 클래스 컴포넌트 App의 기본 구조

export default class App {
  // 클래스를 생성하면 하나의 객체 데이터가 완성됨
  // 만들어진 객체 데이터는 this 키워드를 통해 el 속성으로 메모리 상에만 만들어져 있는 div 요소를 하나 가짐
  constructor() {
    // 생성될 때
    this.el = document.createElement("div"); // 자기 자신의 el 변수에 메모리상에만 추가하는 div 생성
    this.el.textContent = "Hello world!"; // div요소에 textContent로 문자 할당
  }
}

 

2-2. Component의 구조

export class Component {
  // 원하는 태그를 동적으로 처리하기 위해 매개변수로 태그명 받아옴
  constructor(payload = {}) {
    const { tagName = "div", state = {}, props = {} } = payload; // tagName의 기본값으로 div 할당
    this.el = document.createElement(tagName);
    this.state = state;
    this.props = props;
    this.render();
  }
  render() {
    // ...
  }
}

 

3. 컴포넌트 조건과 반복

import { Component } from "./core/heropy";

// 상속
export default class App extends Component {
  constructor() {
    super({
      state: {
        fruites: [
          {
            name: "Apple",
            price: 1000,
          },
          {
            name: "Banana",
            price: 2000,
          },
          {
            name: "Cherry",
            price: 3000,
          },
        ],
      },
    });
  }
  render() {
    this.el.innerHTML = `
      <h1>Fruits</h1>
      <ul>
        ${this.state.fruites
          .filter((fruit) => fruit.price < 3000)
          .map((fruit) => `<li>${fruit.name}</li>`)
          .join("")}
      </ul>
    `; 
  }
}

3-1. join으로 문자열을 만들어주는 이유

map은 새로운 배열을 다시 반환해주기 때문!

console.log(this.state.fruites.map((fruit) => <li>${fruit.name}</li>));

join() 사용 전

 

this.state.fruites.map((fruit) => <li>${fruit.name}</li>).join(",")

join() 사용 후

 

👾 3-2) 리스트 렌더링시 ,는 어디서 온 것인가..

// ,가 같이 출력된 이유
this.state.fruites.map((fruit) => <li>${fruit.name}</li>).join("")

// 위 코드에서 join에 ,를 반드시 추가해줘야한다.
this.state.fruites.map((fruit) => <li>${fruit.name}</li>).join(",")

 

배열의 각 요소를 문자열로 결합할 때 Array.join() 메서드에 구분자를 지정하지 않으면 기본적으로 쉼표가 사용돼서 각 요소 사이에 쉼표가 추가된다. 그러니 꼭 , 로 구분해 주자.

---

[패스트캠퍼스 인강] 프론트엔드 웹 개발의 모든 것 초격차 패키지 Online - API를 활용한 영화 검색 사이트(링크)

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!