Colin's Blog
자바스크립트와 React.js를 이용한 음악 검색 애플리케이션 만들기

이번 블로그에서는 자바스크립트와 React.js를 이용하여 음악 검색 애플리케이션을 만드는 방법에 대해 알아보겠습니다.

목표 설정

우리의 목표는 사용자가 원하는 음악을 검색하고, 해당 음악에 대한 정보를 표시하는 간단한 애플리케이션을 만드는 것입니다. 이를 위해 아래와 같은 기능을 구현할 예정입니다.

프로젝트 설정

먼저, React.js 프로젝트를 생성합니다. Terminal 또는 Command Prompt에서 아래 명령을 실행해주세요.

npx create-react-app music-search-app
cd music-search-app

이제 프로젝트 폴더 안에서 작업을 진행할 수 있습니다.

음악 검색 기능 구현

먼저, 음악 검색을 위한 컴포넌트를 만들어야 합니다. src 폴더 안에 SearchBar.js 파일을 생성하고, 다음과 같은 코드를 작성해주세요.

import React, { useState } from 'react';

const SearchBar = ({ onSearch }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleInputChange = (e) => {
    setSearchTerm(e.target.value);
  };

  const handleSearch = () => {
    onSearch(searchTerm);
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleInputChange} />
      <button onClick={handleSearch}>검색</button>
    </div>
  );
};

export default SearchBar;

이 코드는 SearchBar라는 컴포넌트를 정의하고, 검색어를 입력할 수 있는 입력창과 검색 버튼을 렌더링합니다. 검색어 입력창의 값은 searchTerm이라는 상태로 관리되고, 검색 버튼을 클릭하면 onSearch 함수가 호출됩니다.

다음으로, 검색 결과를 표시하기 위한 컴포넌트를 만들어보겠습니다. src 폴더 안에 SearchResult.js 파일을 생성하고, 다음과 같은 코드를 작성해주세요.

import React from 'react';

const SearchResult = ({ result }) => {
  return (
    <div>
      <h2>{result.title}</h2>
      <p>가수: {result.artist}</p>
      <p>앨범: {result.album}</p>
      <p>발매 연도: {result.year}</p>
      {/* 추가적인 음악 정보를 필요에 따라 표시할 수 있습니다. */}
    </div>
  );
};

export default SearchResult;

이 컴포넌트는 SearchResult라는 컴포넌트를 정의하고, result라는 프로퍼티를 통해 검색 결과를 전달받아 화면에 표시합니다.

애플리케이션 구성

이제 애플리케이션을 구성하기 위해 메인 컴포넌트를 만들어보겠습니다. src 폴더 안에 App.js 파일을 열고, 다음과 같은 코드를 작성해주세요.

import React, { useState } from 'react';
import SearchBar from './SearchBar';
import SearchResult from './SearchResult';

const App = () => {
  const [searchResult, setSearchResult] = useState(null);

  const handleSearch = (searchTerm) => {
    // 검색 API를 호출하고 결과를 searchResult 상태로 업데이트합니다.
    // 간단한 예제를 위해 검색 결과를 하드코딩으로 설정합니다.
    setSearchResult({
      title: '마음을 드려요',
      artist: '아이유',
      album: 'Palette',
      year: 2017
    });
  };

  return (
    <div>
      <h1>음악 검색 애플리케이션</h1>
      <SearchBar onSearch={handleSearch} />
      {searchResult && <SearchResult result={searchResult} />}
    </div>
  );
};

export default App;

위 코드에서 App 컴포넌트는 searchResult라는 상태를 가지고 있습니다. 검색 결과가 있을 경우에만 SearchResult 컴포넌트를 렌더링합니다. 검색 결과가 없는 초기 상태에서는 null로 설정됩니다.

애플리케이션 실행

이제 애플리케이션을 실행해보겠습니다. Terminal 또는 Command Prompt에서 npm start 명령을 실행해주세요.

npm start

애플리케이션이 성공적으로 실행되면, 웹 브라우저에서 http://localhost:3000 주소로 접속하면 애플리케이션을 확인할 수 있습니다.

마치며

이번 블로그에서는 자바스크립트와 React.js를 이용하여 음악 검색 애플리케이션을 만드는 방법에 대해 알아보았습니다. 이는 단순한 예제일 뿐이지만, 실제로는 API를 활용하여 음악 검색을 구현하는 등 더 많은 기능을 추가할 수 있습니다. React.js를 이용하여 동적이고 유연한 웹 애플리케이션을 개발할 수 있으므로, 음악 검색 외에도 다양한 프로젝트에 활용해보시기 바랍니다.

#JavaScript #React.js

© 2018 Colin. All rights reserved.