19일차

19일차는 개인 프로젝트를 진행했다. 계속 만들고 있던 자기소개 페이지를 만드는데, 오늘은 내용을 더 나아가기 전에 페이지를 컴포넌트화 했다. 실제로 진행하기 전에는 그냥 분리만 하면 되는거 아닐까 하는 생각을 했다.

이는 아닐한 생각이었다. 애초에 코드를 너무 못짜서 컴포넌트화 하는데 한 세월이 걸렸다. 물론 아직 작기 때문에 많지는 않았지만, 그래도 나름 열심히 했고, 이를 정리하려 한다. 바뀐 내용은 하나도 없고, 내부적인 부분만 수정했다.

git: https://github.com/leeyulgok/yulgok-page

개인 프로젝트

우선 현재 어떻게 진행됐는지 결과다.

영상으로 보니까 아직 해야 할 부분이 많다고 생각되지만, 한편으로는 자랑스럽다고 생각한다.

컴포넌트화

원래는 M이 기존에 있던 큼직한 페이지다. 이를 새로운 컴포넌트와 함께 컴포넌트화를 진행했다. 지금 정리할 부분은 크게 깨달음을 얻던 부분만 정리해보려 했다. 전체 다 하려면 양이 너무 많기 때문이다.

Button

import classes from './Button.module.css';

const Button = props => {
    const { className, children } = props;
    
    return (
        <button className={`${classes.button} ${className}`}>{children}</button>
    );
};

export default Button;

우선 Button 이다. 위의 gif 파일에서처럼 누르는 Button은 위의 코드로 짰다. 기본적인 디자인(+hover)가 있고, Button 컴포넌트를 사용하는 곳에서 className을 props로 받아서 재정의 할 수 있도록 했다. 이렇게 함으로써 코드의 확장성을 높였다.

Form

1. ContactForm.js

import FormField from "./FormField";
import Button from "../../UI/Button";

import classes from "./ContactForm.module.css";

const ContactForm = () => {
  return (
    <section className={classes.contactSection}>
      <form className={classes.contactForm}>
        <div className={classes.contactContainer}>
          <div className={classes.contactRow}>
            <FormField label="Name" type="text" name="name" />
            <FormField label="Phone" type="text" name="phone" />
          </div>
          <div className={classes.contactRow}>
            <FormField label="E-mail" type="text" name="email" />
            <div className={classes.submitBtn}>
              <Button className={classes.contactBtn} type="submit">
                Submit
              </Button>
            </div>
          </div>
          <div className={classes.contactRow}>
            <FormField label="Message" type="textarea" name="message" />
          </div>
        </div>
      </form>
    </section>
  );
};

export default ContactForm;

2. FormField.js

import classes from './FormField.module.css';

function FormField({label, type, name}) {
    if (type === "textarea") {
      return (
        <div className={classes.contents}>
          <label>{label}</label>
          <textarea name={name} />
        </div>
      );
    }
  
    return (
      <div className={classes.contents}>
        <label>{label}</label>
        <input type={type} name={name} />
      </div>
    );
  }
  
  export default FormField;

Form도 두 부분으로 컴포넌트화 했다. 처음은 전체적인 Form을 ContactForm이라는 이름으로 컴포넌트화 하고 Form 안에서 사용한 태그 또한 FormField로 컴포넌트화 했다.

label과 type, name을 props로 받아서 어떤 타입 태그인지, 어떤 이름을 설정할지 정했다. 이렇게 해서 더 나은 코드를 짤 수 있었다.

정리하기

개인 프로젝트를 진행하면서 보다 리액트와 친해졌다는 기분이 들었다. 특별한 기술을 사용한 것도 아니고, 어떤 애니메이션도 사용한 건 아니지만, 이 부분이 리액트의 가장 기본이 될 부분이지 않았나 하는 생각이 들었다.

이 부분을 잘 진행했다 생각하기 때문에, 다음에는 어떤 기능을 추가해볼까 생각중이다. 물론 페이지의 내용은 나중에 채울 예정이다. 지금 당장 내용은 중요한 부분이 아니기 때문에.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프