React로 가사 찾기 앱 만들기

소개

이 튜토리얼에서는 React를 사용하여 가사 찾기 웹 애플리케이션을 만들어 보겠습니다. 이 프로젝트는 API 통합, 상태 관리 및 동적 콘텐츠 표시를 연습하려는 사람들에게 적합합니다.

프로젝트 개요

가사 찾기를 사용하면 노래 제목과 아티스트 이름을 입력하여 노래 가사를 검색할 수 있습니다. 공개 API에서 가사를 가져와 화면에 표시합니다. 사용자는 자신이 좋아하는 노래의 가사를 빠르게 찾아 읽을 수 있습니다.

특징

• 검색 기능: 노래 제목과 아티스트 이름으로 가사를 검색할 수 있습니다.
• API 통합: 공개 가사 API에서 가사를 가져옵니다.
• 동적 콘텐츠: 사용자 입력에 따라 가사를 동적으로 표시합니다.
• 사용자 친화적인 인터페이스: 가사 검색 및 보기를 위한 깔끔하고 사용하기 쉬운 인터페이스

사용된 기술

• React: 사용자 인터페이스를 구축하고 구성 요소 상태를 관리합니다.
• CSS: 애플리케이션 스타일을 지정합니다.
• JavaScript: API 요청 및 앱 로직을 처리합니다.

프로젝트 구조

프로젝트는 다음과 같이 구성됩니다.

├── public
├── src
│   ├── components
│   │   ├── LyricsFinder.jsx
│   │   ├── SearchForm.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

주요 구성 요소

• LyricsFinder.jsx: 검색 로직을 관리하고 가져온 가사를 표시합니다.
• SearchForm.jsx: 사용자가 노래 제목과 아티스트 이름을 입력할 수 있는 양식을 제공합니다.
• App.jsx: 메인 레이아웃과 LyricsFinder 구성 요소를 렌더링합니다.

코드 설명

가사찾기 구성요소

LyricsFinder 구성 요소는 API 통합을 처리하고 검색 결과를 관리합니다.

import { useState } from "react";
import SearchForm from "./SearchForm";

const LyricsFinder = () => {
  const [lyrics, setLyrics] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const fetchLyrics = async (song, artist) => {
    setLoading(true);
    setError("");
    try {
      const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`);
      if (!response.ok) {
        throw new Error("Lyrics not found");
      }
      const data = await response.json();
      setLyrics(data.lyrics);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div classname="lyrics-finder">
      <searchform onsearch="{fetchLyrics}"></searchform>
      {loading && <p>Loading...</p>}
      {error && <p classname="error">{error}</p>}
      {lyrics && <pre classname="lyrics">{lyrics}

}