이 튜토리얼에서는 React를 사용하여 가사 찾기 웹 애플리케이션을 만들어 보겠습니다. 이 프로젝트는 API 통합, 상태 관리 및 동적 콘텐츠 표시를 연습하려는 사람들에게 적합합니다.
가사 찾기를 사용하면 노래 제목과 아티스트 이름을 입력하여 노래 가사를 검색할 수 있습니다. 공개 API에서 가사를 가져와 화면에 표시합니다. 사용자는 자신이 좋아하는 노래의 가사를 빠르게 찾아 읽을 수 있습니다.
프로젝트는 다음과 같이 구성됩니다.
├── public ├── src │ ├── components │ │ ├── LyricsFinder.jsx │ │ ├── SearchForm.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
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} /> {loading && <p>Loading...</p>} {error && <p className="error">{error}</p>} {lyrics && <pre className="lyrics">{lyrics}}
가사, 로딩, 오류 메시지 상태를 관리하는 컴포넌트입니다. API에서 가사를 가져와 표시합니다.
SearchForm 구성 요소는 사용자가 노래 제목과 아티스트 이름을 입력할 수 있는 양식을 제공합니다.
import { useState } from "react"; const SearchForm = ({ onSearch }) => { const [song, setSong] = useState(""); const [artist, setArtist] = useState(""); const handleSubmit = (e) => { e.preventDefault(); onSearch(song, artist); }; return ( <form onSubmit={handleSubmit} className="search-form"> <input type="text" placeholder="Song Title" value={song} onChange={(e) => setSong(e.target.value)} /> <input type="text" placeholder="Artist Name" value={artist} onChange={(e) => setArtist(e.target.value)} /> <button type="submit">Search</button> </form> ); }; export default SearchForm;
이 구성요소는 노래 제목과 아티스트에 대한 사용자 입력을 받아 검색 기능을 실행합니다.
App 구성 요소는 레이아웃을 관리하고 LyricsFinder 구성 요소를 렌더링합니다.
import LyricsFinder from './components/LyricsFinder' import "./App.css" const App = () => { return ( <div className='app'> <div className="heading"> <h1>Lyrics Finder</h1> </div> <LyricsFinder/> <div className="footer"> <p>Made with ❤️ by Abhishek Gurjar</p> </div> </div> ) } export default App
헤더를 제공하고 중앙에 LyricsFinder 컴포넌트를 렌더링하는 컴포넌트입니다.
CSS는 깔끔하고 사용자 친화적인 인터페이스를 보장하기 위해 애플리케이션 스타일을 지정합니다.
* { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: sans-serif; } .app { width: 100%; height: 100vh; background-image: url(./assets/images/bg.jpg); background-size: cover; background-repeat: no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; } .heading { width: 200px; height: 40px; display: flex; align-items: center; margin-bottom: 20px; justify-content: center; background-color: #eab229; color: black; border: 2px solid white; border-radius: 20px; text-align: center; } .heading h1 { font-size: 18px; } .lyrics-container { margin-top: 10px; color: white; display: flex; align-items: center; flex-direction: column; } .input-container { display: flex; align-items: center; flex-direction: column; } .track-input-box { margin: 7px; width: 500px; height: 30px; background-color: #363636; border: 1.5px solid white; border-radius: 7px; overflow: hidden; } .track-input-box input { width: 480px; height: 30px; background-color: #363636; color: white; margin-left: 10px; outline: none; border: none; } .input-search { display: flex; align-items: center; justify-content: center; } .artist-input-box { margin: 7px; width: 400px; height: 30px; background-color: #363636; border: 1.5px solid white; border-radius: 7px; overflow: hidden; } .artist-input-box input { width: 380px; height: 30px; margin-left: 10px; background-color: #363636; color: white; border: none; outline: none; } .search-btn { width: 100px; padding: 6px; border-radius: 7px; border: 1.5px solid white; background-color: #0e74ad; color: white; font-size: 16px; } .search-btn:hover { background-color: #15557a; } .output-container { background-color: black; width: 600px; height: 300px; border: 1.5px solid white; border-radius: 7px; overflow-y: scroll; margin-block: 40px; } .output-container::-webkit-scrollbar { display: none; } .output-container p { margin: 30px; text-align: center; font-size: 16px; } .footer { font-size: 14px; color: white; }
스타일링은 사용자 친화적인 시각적 요소와 반응형 디자인으로 깔끔한 레이아웃을 보장합니다.
이 프로젝트를 시작하려면 저장소를 복제하고 종속성을 설치하세요.
git clone https://github.com/abhishekgurjar-in/lyrics-finder.git cd lyrics-finder npm install npm start
이렇게 하면 개발 서버가 시작되고 애플리케이션은 http://localhost:3000에서 실행됩니다.
여기에서 가사 찾기의 라이브 데모를 확인하세요.
가사 찾기 프로젝트는 API 통합과 React의 동적 콘텐츠 처리를 연습할 수 있는 훌륭한 방법입니다. 깔끔하고 대화형 사용자 인터페이스로 유용한 애플리케이션을 구축하는 실제 사례를 제공합니다.
Abhishek Gurjar는 대화형의 매력적인 웹 애플리케이션 구축에 열정을 갖고 있는 웹 개발자입니다. GitHub에서 그의 작업을 팔로우할 수 있습니다.
위 내용은 React로 가사 찾기 앱 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!