[Javascript] 자바스크립트에서 class 사용하기

🤔그냥 HTML로 퉁치면 되지 왜 자바스크립트에 만드는 귀찮은 짓을 하는걸까?

1. 데이터 관리와 상태변화를 효율적으로 할 수 있어서
2. 재사용하기 쉽고 유지보수가 편해서
3. 코드의 흐름을 파악하기 쉬워 협업 시 좋아서
4. UI업데이트를 클래스 내에서 처리하면 상태변화에 따른 UI변경이 자연스럽게 이루어질 수 있어서

단순한 정적 웹페이지면 HTML만으로 충분하겠지만, 웹 애플리케이션에서는 사용자와의 상호작용, 데이터 관리, 동적 UI업데이트 등을 처리하기 위해 자바스크립트의 기능을 활용하는게 중요하다.
이를 위해 클래스와 같은 개념을 활용하여 코드를 구조화하고 관리하는 것이다.

검색바를 예시로 Class를 만들어보자

// SearchInput.js
class SearchInput {
  constructor({$target, onSearch}){
    const $wrapper = document.createElement('section');
    const $searchInput = document.createElement('input');
    this.$searchInput = $searchInput;
    this.$serchInput.placeholder = '아무거나 써보렴';
    
    $wrapper.className = 'search-wrap';
    $wrapper.appendChild($searchInput);
    $target.appendChild($wrapper);
    
    $searchInput.addEventListener('keypress', (e) => {
    	if (e.key === 'Enter') {
        	onSearch(e.target.value);
        }
    });
  }
  render() {}
}

딱 class만 만들어서 화면에 뿌려줄 생각이라면 방법은 간단하다.

1. class 클래스명 {} 클래스를 정의한다.
2. constructor(){}클래스 생성자 함수를 소환한다.
이 때, 매개변수가 있다면 넣어주자. 나는 App.js와 주고받을 매개변수들을 넣어줬다.
3. 요소를 생성한다.
const $wrapper = document.createElement('section)';
section을 생성했다. 여기서 $wrapper는 생성된 DOM 요소를 가리키는 변수다.
4. css도 적용해야 한다면 class명도 설정해주자.
$wraper.className = `search-input`;
5. 생성된 변수들을 자식 요소로 추가해주자.
$wrapper의 자식요소로 $searchInput을 넣어주면 $wrapper안으로 input이 추가된다.
$targetDOM요소에 $wrapper를 자식요소로 추가해준다.
손녀>자식>부모 이런 순서대로 순차적으로 추가해주면 된다.

$기호를 변수나 함수 이름 앞에 붙여서 사용하는건 개발의 관례 중 하나라고 한다.
간지나보이니까 따라해보자.
코드가 길어지면 내 안에 혼돈의 흑염룡이 자리잡으니까 잠재우고 싶으면 사용해보자.

constructor는 클래스의 초기화 작업을 담당한다.
객체의 초기 상태를 설명하거나, 필요한 리소스를 할당하는 등의 작업을 수행한다.

현재 render(){}가 비어있지만, 추후 UI를 업데이트하거나 렌더링할 때 사용할 수 있다.