기능적 React로 쓰기 프롬프트 생성기 만들기

나는 개발자일 뿐만 아니라 픽션 작가이고 가끔 무엇을 써야 할지 아이디어가 부족할 때가 있습니다. 몇 주 전에 이것은 무엇을 코딩해야 하는지에 대한 아이디어를 제공했습니다. writing prompt generator !



물론 이런 것들이 많이 있지만 직접 만드는 것도 재미있었고, 이전 React 앱은 대부분 클래스 구성 요소로 만들어졌기 때문에 이 프로젝트에서는 React의 함수 구성 요소에 더 익숙해질 수 있는 기회를 얻었습니다. 방법.

이 게시물은 내가 이것을 설정하는 방법을 안내합니다! React를 라이브러리로 어느 정도 알고 있다고 가정합니다.

1. 여러 생성기 페이지

이 생성기로 가장 먼저 달성하고 싶었던 것은 사용자가 각 프롬프트 세트에 대해 서로 다른 페이지가 있는 여러 단어 세트에서 프롬프트를 생성할 수 있도록 하는 것이었습니다. 이를 위해 두 개의 프롬프트 페이지 구성 요소와 각각 다른 소품 세트로 렌더링할 수 있는 생성기 구성 요소 하나를 만들었습니다.

import React from 'react';
import Generator from './Generator';
import {words} from '../assets/words';

const WordsPromptPage = () => {
  return (
    <div>
      <p>Write 250 words about:</p>
      <Generator dataset={words}/>
    </div>
  );
}

export default WordsPromptPage;

여기서 WordsPromptPage 구성 요소는 별도 파일의 배열인 words 데이터 세트로 Generator 구성 요소를 렌더링합니다. 다양한 유형의 프롬프트에 대한 데이터베이스를 만들 수 있었지만 백엔드와 프런트엔드를 별도로 호스팅하는 대신 Netlify의 프런트엔드로 더 간단하게 생성기를 호스팅할 수 있도록 프런트엔드의 자산 파일에 유지하기로 결정했습니다.

2. 내비게이션

앱에서 다른 생성기 페이지(및 내 정보 페이지) 사이를 전환하기 위해 기본react-router-dom 구성 요소에서 App를 사용하여 URL이 변경되면 표시되는 구성 요소도 변경되도록 했습니다.

import React from 'react';
import './App.css';
import WordsPromptPage from './components/WordsPromptPage';
import NauticalWordsPromptPage from './components/NauticalWordsPromptPage';
import {
  Switch,
  Route
} from 'react-router-dom';
import NavBar from './components/NavBar';
import AboutPage from './components/AboutPage';

function App() {
  return (
    <div className="App">
      <NavBar/>
      <h1>Prompt Generator</h1>
      <Switch>
        <Route exact path="/nauticalwords"><NauticalWordsPromptPage/></Route>
        <Route exact path="/about"><AboutPage/></Route>
        <Route path="/"><WordsPromptPage/></Route>
      </Switch>
    </div>
  );
}

export default App;

여기서는 Switch를 사용했는데 일치하는 항목Route 하나만 렌더링하고 Switch 경로만 독점적으로 렌더링하기를 원했기 때문입니다. 사용자가 /nauticalwords를 입력하고 WordsPromptPage 및 NauticalWordsPromptPage /nauticalwords가 /nauticalwords 및 / 모두와 일치하기 때문에 둘 다 동일한 페이지에 렌더링됩니다.
Switch는 제목과 NavBar 구성 요소 아래에 있으므로 페이지의 일부는 URL에 따라 변경되지만 제목과 탐색은 항상 렌더링됩니다.
NavBar 구성 요소에 다음과 같은 다양한 경로에 대한 링크를 넣었습니다.

import React from 'react';
import { Link } from 'react-router-dom';

const NavBar = () => {

  return (
    <nav role="navigation">
        <Link className="nav-link" to="/">Words</Link>
        <Link className="nav-link" to="/nauticalwords">Nautical Words</Link>
        <Link className="nav-link" to="/about">About</Link>
    </nav>
  );
}

export default NavBar;

3. 기능 구성 요소

내가 React로 빌드한 마지막 앱은 주로 클래스 구성 요소를 사용했습니다. 내가 사용한 함수 구성 요소는 단순한 프레젠테이션 구성 요소였습니다. 구성 요소는 주로 상태 비저장 함수 구성 요소로 작성된(그리고 제 경우에는) 사물의 모양과 관련된 구성 요소였습니다. 상태를 처리해야 할 때 클래스 구성 요소를 고수했습니다.

이 프로젝트에서는 함수 구성 요소, 특히 함수 구성 요소의 상태를 처리할 수 있는 후크를 사용하여 함수 구성 요소에 더 익숙해지고 싶었습니다.

React 문서에 따르면 후크는 "함수 구성 요소에서 React 상태 및 수명 주기 기능에 '연결'할 수 있는 기능… 클래스 없이 React를 사용할 수 있도록 합니다."

생성기 구성 요소의 경우 useState를 사용하여 prompt 변수와 setPrompt 함수를 반환하여 프롬프트를 업데이트할 수 있습니다.

import React, { useState } from 'react';

const Generator = (props) => {

  const [prompt, setPrompt] = useState(“Click to generate a prompt!”)

  const generate = () => {
    return props.dataset[Math.floor(Math.random() * props.dataset.length)];
  }


  return (
    <div>
      <p id="prompt">{prompt}</p>
      <button onClick={() => setPrompt(generate())}>Generate</button>
    </div>
  );
}

export default Generator;

여기서 초기 상태는 "Click to generate a prompt!"라는 문자열로 설정되었고, 버튼 클릭 시 prompt는 generate() 함수의 반환 값으로 설정되었습니다.

하지만 이 설정을 마친 후에는 생성된 임의 프롬프트와 함께 사이트를 로드하는 것이 더 나은 아이디어라는 것을 깨달았고 아마도 useState를 사용하여 이 작업을 수행할 수 있을 것입니다.

import React, { useState } from 'react';

const Generator = (props) => {

  const generate = () => {
    return props.dataset[Math.floor(Math.random() * props.dataset.length)];
  }

  const [prompt, setPrompt] = useState(() => generate())


  return (
    <div>
      <p id="prompt">{prompt}</p>
      <button onClick={() => setPrompt(generate())}>Generate</button>
    </div>
  );
}

export default Generator;

generate()가 설정되기 전에 useState 메서드가 선언된 한(JavaScript doesn’t hoist function expressions 때문에) prompt의 초기 상태를 generate()의 반환 값으로 설정할 수 있으므로 앱이 로드 및 새로고침 시 새로 생성된 프롬프트가 표시됩니다.

결론

저는 이 앱을 만드는 것이 정말 즐거웠고 며칠 동안 함수 구성 요소에 익숙해지고 React에서 휴식을 취한 후 더 많은 시간을 React에 보낼 수 있는 좋은 방법이었습니다! 앞으로 기능적 React에 대해 더 깊이 파고들고 생성기에서 쓰기 프롬프트 유형을 확장할 수 있기를 기대합니다!