[js] mvc 패턴을 연습해보자 -1 검색폼

   <input type="text" placeholder="검색어를 입력하세요" autofocus />

autofocus 란

정의 및 특징

<input> 태그의 autofocus 속성은 페이지가 로드될 때 자동으로 포커스(focus)가 <input> 요소로 이동됨을 명시합니다.

 

autofocus 속성은 불리언(boolean) 속성입니다.

불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 됩니다.

-출처 http://www.tcpschool.com/html-tag-attrs/input-autofocus

코딩교육 티씨피스쿨

 

[extension 추천] Auto Import 

 

파일명을 입력하면 자동으로 import가 된다.

 

import View from "./View.js";

export default class SearchFormView extends View {

constructor() {

super(qs("#search-form-view)"));

this.resetElement = qs("[type=reset]", this.element)

this.showResetButton(false)

}

showResetButton(visible = true) {

this.resetElement.style.display = visible ? "block" : "none";

}

}

초기 SearchFormView.js 파일이다.

qs는 모두 helper 함수.

 

검색창 오른쪽에 x 버튼이 있는데. 

이 x버튼을 초기에 숨기기 위한 로직이다.

우리 팀 프로젝트 중 검색 창을 만들 때 굉장히 유용하지 않을까 생각한다.

 

 

bindEvent() {

on(this.inputElement, "keyup", () => this.handleKeyup())

}

handleKeyup() {

console.log(tag, 'handleKeyup', this.inputElement.value);

const {value} = this.inputElement;

this.showResetButton(value.length > 0)

}

bindEvent는 검색폼에 keyup 이벤트 발생시 x표시를 보여주고, value가 없을 때는 x버튼을 없애는 로직이다. 

 

다음은 Controller.js 파일이다.

const tag = "[Controller]";

import SearchFormView from './views/SearchFormView.js';

export default class Controller {

constructor(store, {SearchFormView}) {

console.log(tag);

this.store = store;

this.SearchFormView = SearchFormView;

this.subscribeViewEvents();

}

subscribeViewEvents() {

this.SearchFormView.on('@submit', event => this.search(event.detail.value))

}

search(keyword) {

console.log(tag, keyword);

}

}

이를 통해 엔터를 입력하면 검색결과가 보이는 기능을 완성하였다. 

다음은 해당 완성본이다.

콘솔창에 "[Controller] asd" 로 입력을 잘 받는 것을 확인할 수 있다.

 

bindEvent() {

on(this.inputElement, "keyup", () => this.handleKeyup());

on(this.element, "submit", event => this.handleSubmit(event))

on(this.resetElement, "click", () => this.handleReset());

 

}

bindEvent 안에

on(this.resetElement, "click", () => this.handleReset());

on을 새로 추가해주었고, 이 handleReset은

 

handleReset() {

console.log(tag, "handleReset");

this.emit("@reset");

}

x버튼을 클릭하였을 때 검색결과를 삭제해주는 기능을 한다. 

 

또한

 

Controller.js 파일에서

subscribeViewEvents() {

this.SearchFormView.on('@submit', event =>

this.search(event.detail.value))

.on("@reset", () => this.reset());

 

}

.on("@reset", () => this.reset());

을 추가해주었고, reset은

reset() {

console.log(tag, 'reset');

}

reset 커스텀 이벤트가 발생시 확인하기 위한 콘솔로그이다.

 

이를 통해, mvc패턴으로 검색폼을 구현하였고, 

 

● 검색 상품명 입력 폼이 위치한다

● 검색어를 입력하면 x버튼이 보이고, 없으면 x 버튼을 숨긴다

● 엔터를 입력하면 검색 결과가 보인다

● x 버튼을 클릭하거나 검색어를 삭제하면 검색 결과를 삭제한다

 

총 네 가지의 요구사항을 구현완료하였다.

 

 

-참고 인프런 김정환 "만들고 비교하며 학습하는 리액트"