React를 사용하여 농담 생성기 만들기

소개

이 튜토리얼에서는 React를 사용하여 간단하고 재미있는 Joke Generator를 구축하는 방법을 안내합니다. 이 프로젝트는 React에서 API 요청 처리 및 기능적 구성 요소 내 상태 관리를 연습하려는 초보자에게 적합합니다.

프로젝트 개요

이 농담 생성기는 API에서 임의의 농담을 가져와 사용자가 버튼을 클릭하면 화면에 표시합니다. 깨끗하고 최소한의 사용자 인터페이스를 갖추고 있어 상호 작용이 간단합니다. 이 프로젝트에서는 React에서 API를 통합하고 구성요소 상태를 관리하는 방법을 가르칩니다.

특징

• Random Joke Generation: API에서 임의의 농담을 가져와서 화면에 표시합니다.
• 반응형 디자인: 사용자 친화적인 경험을 위해 다양한 화면 크기에 맞게 조정됩니다.
• 사용하기 쉬운 인터페이스: 클릭할 때마다 새로운 농담을 생성하는 단일 버튼.

사용된 기술

• React: 사용자 인터페이스 구축용.
• CSS: 애플리케이션 스타일을 지정하고 반응형 디자인을 보장합니다.
• Joke API: 웹에서 임의의 농담을 가져옵니다.

프로젝트 구조

프로젝트의 구성은 다음과 같습니다.

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

주요 구성 요소

• Joke.jsx: 농담을 가져오고 표시하는 논리가 포함되어 있습니다.
• App.jsx: Joke 구성 요소를 래핑하고 애플리케이션의 전체 레이아웃을 처리합니다.
• App.css: 앱과 구성요소에 대한 스타일을 제공합니다.

코드 설명

농담 구성 요소

Joke 구성 요소는 API에서 농담을 가져오고 구성 요소의 상태를 업데이트하여 농담을 표시하는 역할을 담당합니다. React의 useState 후크를 사용하여 농담 상태를 관리하고 fetchJoke 함수를 사용하여 API에서 데이터를 검색합니다.

import { useState } from "react";

const Joke = () => {
  const [joke, setJoke] = useState("");

  const fetchJoke = () => {
    fetch("https://v2.jokeapi.dev/joke/Any?type=single")
      .then((response) => response.json())
      .then((data) => setJoke(data.joke));
  };

  return (
    <>
      <div className="joke-container">
        <div className="output">
          <p>{joke}</p>
        </div>
      </div>
      <button className="button" onClick={fetchJoke}>
        <p>Generate Joke</p>
      </button>
    </>
  );
};

export default Joke;

이 구성요소에서는 useState 후크를 사용하여 가져온 농담을 저장합니다. "농담 생성" 버튼을 클릭하면 fetchJoke 기능이 실행되어 API에서 새 농담을 가져오고 그 결과로 농담 상태를 업데이트합니다.

앱 구성요소

App 구성 요소는 전체 레이아웃을 처리하고 Joke 구성 요소를 렌더링합니다. 또한 애플리케이션의 모양을 향상시키기 위한 머리글과 바닥글도 포함되어 있습니다.

import Joke from "./components/Joke";
import "./App.css";

const App = () => {
  return (
    <div className="app">
      <div className="header">
        <h1>Joke Generator</h1>
      </div>
      <Joke />
      <div className="footer">
        <p>Made with ❤️ by Abhishek Gurjar</p>
      </div>
    </div>
  );
};

export default App;

이 구성요소는 레이아웃을 구성하고 제목(농담 생성기)과 작성자를 표시하는 바닥글을 추가합니다.

CSS 스타일링

CSS 스타일을 사용하면 레이아웃이 깔끔하고 반응성이 좋습니다. 농담 컨테이너가 페이지 중앙에 배치되고, 버튼이 모던한 느낌을 주는 스타일로 디자인되었습니다.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #ffff42;
  color: black;
}
.app {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.header {
  margin-bottom: 10px;
}
.joke-container {
  margin: 15px;
  width: 400px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid black;
  background-color: #c2edf6;
  border-radius: 7px;
}
.output {
  width: 350px;
  font-size: 16px;
  font-weight: 500;
}
.button {
  width: 400px;
  background-color: #0075e1;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  border-radius: 10px;
}
.button:hover {
  background-color: #4086c8;
}
.footer {
  margin-top: 100px;
}

.app 클래스는 기본 레이아웃 스타일을 지정하고, .joke-container는 농담이 테두리가 있는 컨테이너 내에 표시되도록 하며, .button은 농담 생성 버튼에 대한 스타일을 제공합니다.

설치 및 사용법

이 프로젝트를 시작하려면 저장소를 복제하고 종속성을 설치하세요.

git clone https://github.com/abhishekgurjar-in/joke-generator.git
cd joke-generator
npm install
npm start

이렇게 하면 개발 서버가 시작되고 애플리케이션은 http://localhost:3000에서 실행됩니다.

라이브 데모

여기에서 농담 생성기의 라이브 데모를 확인할 수 있습니다.

결론

이 간단한 Joke Generator 프로젝트는 상태 관리 및 API 요청을 포함한 React 기본 사항을 연습할 수 있는 좋은 방법입니다. 또한 최소한의 코드로 대화형 웹 애플리케이션을 만드는 방법을 보여주는 예이기도 합니다.

크레딧

• 영감: 이 프로젝트는 온라인 농담 생성기와 API 기반 프로젝트에서 영감을 받았습니다.

작가

Abhishek Gurjar는 대화형 및 반응형 웹 애플리케이션 구축에 열정을 갖고 있는 웹 개발자입니다. GitHub에서 그의 작업을 팔로우할 수 있습니다.

위 내용은 React를 사용하여 농담 생성기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!