프로그래머스 프로그래밍 언어 검색 (2) 입력창 구현

(2) 입력창 구현

api를 통해 반환된 값을 App컴포넌트에 저장하는 SearchInput컴포넌트를 작성한다.

- api.js

const API_END_POINT = "주어진 API";

const request = async (url) => {
  const response = await fetch(url);
  
  if(response.ok)
    return response.json;
  
  throw new Error("요청에 실패했습니다.");
}

export const Fetch = async (keyword) => 
	request(`${API_END_POINT}/languages?keyword=${keyword}`)

keyword를 넘겨받아 keyword에 해당하는 검색결과를 반환하는 api 컴포넌트를 작성한다.

- SearchInput.js

import {Fetch} from "./api.js"

export default function SearchInput({target, onChange}){
  this.element = document.createElement('form');
  this.element.className = 'form 스타일 넣는 클래스';
  target.appendChild(this.element);
  
  this.render = () => {
    this.element.innerHTML = `
		<input class="input 스타일 넣는 클래스" />
	`;
  }
  
  this.element.addEventListener('keyup',async (e)=>{
    await Fetch(e.target.value).then((data)=>onChange(data));
  });
  
  this.render();
}

createElement 메서드를 사용하여 생성된 form태그를 element 프로퍼티에 추가하고, target으로 넘겨받은 노드의 child로 추가해준다. 또 render 메서드를 통해 화면에 input창을 렌더링 해준다.
이때 this.element 프로퍼티에 keyup 이벤트가 발생했을 때 해당 이벤트의 값을 onChange 함수의 인자로 전달한다.

- App.js 추가

import SearchInput from './SearchInput.js'

export default function App({target}){
  //...이전 코드
  
  const searchInput = new SearchInput({
  	target: target,
    onChange: (data) => {
      this.setState({
        ...this.state,
        searchResult: data,
      });
    }
  })
}

App 컴포넌트에 searchInput 객체를 생성한다. 이때 생성된 searchInput으로 넘겨받는 값을 onChange 함수를 통해 App컴포넌트의 state프로퍼티 중 searchResult에 저장한다.