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

소개

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

👀 미리보기

project preview

🎯 과제

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

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 상태에 따라 폼 또는 명함을 렌더링합니다.

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

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

Profile card submission result

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

요약

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.

React 로 반응형 명함 만들기

소개

👀 미리보기

🎯 과제

🏆 성과

프로젝트 설정

ProfileCard 컴포넌트 구현

요약