React 로 개인 명함 만들기 | 반응형 웹 애플리케이션

소개

이 프로젝트에서는 React 를 사용하여 개인 명함을 만드는 방법을 배우게 됩니다. 이 프로젝트는 사용자가 개인 정보를 입력하고 맞춤형 명함을 생성할 수 있는 반응형 (responsive) 및 인터랙티브 (interactive) 웹 애플리케이션을 구축하는 것을 포함합니다.

👀 미리보기

🎯 과제

이 프로젝트에서 다음을 배우게 됩니다:

React 프로젝트를 설정하고 필요한 종속성을 설치하는 방법
react-hook-form 라이브러리의 useForm 훅을 사용하여 ProfileCard 컴포넌트를 구현하는 방법
ProfileCard 컴포넌트를 메인 App 컴포넌트에 통합하는 방법
CSS 를 사용하여 애플리케이션의 스타일을 지정하여 매력적이고 시각적으로 일관된 디자인을 만드는 방법

🏆 성과

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

react-hook-form 라이브러리의 useForm 훅을 사용하여 폼 상태 및 유효성 검사를 관리합니다.
재사용 가능한 React 컴포넌트를 생성하고 더 큰 애플리케이션에 통합합니다.
CSS 를 사용하여 원하는 시각적 모양을 얻도록 React 애플리케이션의 스타일을 지정합니다.
React 프로젝트에서 모듈식 (modular) 이고 유지 관리 가능한 코드 구조의 중요성을 이해합니다.

프로젝트 설정

이 단계에서는 프로젝트를 설정하고 필요한 종속성을 설치하는 방법을 배우게 됩니다.

코드 편집기를 열고 프로젝트 디렉토리로 이동합니다.

├── public
├── src
│   ├── components
│   │   └── ProfileCard.js
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   ├── profile.png
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

다음으로, 터미널에서 npm install 명령을 사용하여 종속성을 다운로드합니다. 종속성 다운로드가 완료될 때까지 기다린 다음 npm start 명령을 사용하여 프로젝트를 시작합니다.

프로젝트가 성공적으로 시작되면 "Web 8080"을 클릭하여 브라우저에서 미리 봅니다.

✨ 솔루션 확인 및 연습

ProfileCard 컴포넌트 구현

이 단계에서는 react-hook-form 라이브러리의 useForm 훅을 사용하여 ProfileCard 컴포넌트를 구현합니다.

src/components 디렉토리에 있는 ProfileCard.js 파일을 엽니다.

필요한 모듈과 컴포넌트를 가져옵니다:

import React, { useState } from "react";
import { useForm } from "react-hook-form";
import profile from "../profile.png";

ProfileCard 컴포넌트를 구현합니다:

export const ProfileCard = () => {
  const [submitted, setSubmitted] = useState(false);
  const [data, setData] = useState({});
  const {
    register,
    formState: { errors },
    handleSubmit
  } = useForm();

  const onSubmit = (data) => {
    setSubmitted(true);
    setData(data);
  };

  return (
    <div className="wrapper">
      {submitted ? (
        <>
          <img src={profile} alt="profile" className="profile" />
          <h2 className="name-text">{data.name}</h2>
          <p className="position-text">{data.position}</p>
          <p className="info-text">{data.info}</p>
        </>
      ) : (
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="form-field">
            <label htmlFor="name">Name: </label>
            <input
              type="text"
              id="name"
              name="name"
              {...register("name", { required: "Please enter your name" })}
            />
            <p className="name-error">{errors.name?.message}</p>
          </div>

          <div className="form-field">
            <label htmlFor="position">Office: </label>
            <input
              type="text"
              id="position"
              name="position"
              {...register("position", {
                required: "Please enter your position"
              })}
            />
            <p className="position-error">{errors.position?.message}</p>
          </div>

          <div className="form-field">
            <label htmlFor="info">Brief: </label>
            <input
              type="text"
              id="info"
              name="info"
              {...register("info", { required: "Please enter your brief" })}
            />
            <p className="info-error">{errors.info?.message}</p>
          </div>

          <input type="submit" value="Submit" className="submit" />
        </form>
      )}
    </div>
  );
};

이 구현에서는 react-hook-form 라이브러리의 useForm 훅을 사용하여 폼 상태 및 유효성 검사를 관리합니다. 폼이 제출되면 onSubmit 함수가 호출되어 submitted 상태를 true로 설정하고 폼 데이터를 data 상태에 저장합니다.

그런 다음 컴포넌트는 submitted 상태에 따라 폼 또는 명함을 렌더링합니다.

폼을 작성하고 제출하여 애플리케이션을 테스트합니다. 입력된 정보로 명함이 올바르게 표시되는지 확인합니다.

완성된 결과는 다음과 같습니다:

축하합니다! 개인 명함 생성기 프로젝트를 완료했습니다. react-hook-form 라이브러리의 useForm 훅을 사용하여 폼 상태 및 유효성 검사를 관리하고, ProfileCard 컴포넌트를 App 컴포넌트에 통합하는 방법을 배웠습니다. 또한 CSS 를 사용하여 애플리케이션의 스타일을 지정하는 방법도 배웠습니다.