React 마지막 간단한 프로젝트 1일차- Form을 만들어보자

완성본:https://github.com/qjawns0222/hompage.git

Form 이제 뭔지 궁금하실것입니다. 이거는 기존에 일정한 틀을 만들어놓고  우리가 작성을하면 그틀은 유지대고 특정한 부분에 우리가 작성한 내용이 추가되는 것입니다.

그럼 우선 src내부에 Components폴더 만들고 그안에 Form.jsx와 css폴더 만들어주세요 

css폴더 안에는 Form.module.css 를 만들어주세요

 Form.module.css

* {

  text-decoration: none;

  margin: 0;

  padding: 0;

  color: inherit;

}

.nav {

  display: flex;

  width: 100%;

}

.mainnav {

  display: flex;

  width: 100%;

  justify-content: center;

  background-color: rgb(224, 36, 19);

}

.mainnav > * {

  margin: 1% 4%;

  font-size: 28px;

  font-weight: bolder;

}

.mainnav > :hover {

  color: blue;

}

.mainnav > .active {

  color: blue;

}

작성

이거는 바로  다른 요소들과 클래스명이 겹처지지 않기위해서 이렇게 나눠서 작성하고 해당 파일에서 import해서 쓰면 자동으로 겹치지 않는 클래스 이름으로 변경해줍니다. Form.jsx에서 상세하게 설명하겠습니다.

Form.jsx

import React from "react";

import { Link, useLocation } from "react-router-dom";

import style from "./css/Form.module.css";

export default function Form({ children }) {

  const { pathname } = useLocation();

  return (

    <div>

      <div className={style.nav}>

        <div className={style.mainnav}>

          <div className={pathname === "/" ? style.active : style.home}>

            <Link to="/">메인화면</Link>

          </div>

          <div className={pathname === "/menu" ? style.active : style.buy}>

            <Link to="/menu">구매</Link>

          </div>

          <div

            className={

              pathname === "/order" || pathname.length >= 8

                ? style.active

                : style.order

            }

          >

            <Link to="/order">order</Link>

          </div>

        </div>

      </div>

      <div>{children}</div>

    </div>

  );

}

작성

자 여기서 css설명을 이어가면 style이라는 이름으로 css를 가져오고 classname에 style.~ 이런식으로 적으면 자동으로 다른 요소에서 같은 이름을쓰더라도 겹치지 않도록 해줍니다. 즉 style과 연결된 파일의 ~이다 라는 뜻이 됩니다.

이런식으로 이상한 이름이 붙게 됩니다.

 

Link 태그와 to를 이용해서 링크를 만들어 줍니다 html 을 a 태그와 href로 이해하시면 좋습니다.

그런데 className부분에 이상한 조건식이 있는데 저건 삼항조건 연산자입니다. 즉 조건?참일때 실행:false일때 실행 이렇게 작성하는것입니다. 즉 참이면 왼쪽에있는 클래스이름을 지정하고 거짓이면 오른쪽에 있는 클래스이름을 지정하게 됩니다. 즉 위에 정의한 pathname이 기본주소 이후의 값을 가져오는 것입니다. 그걸 활용해서 조건이 참이면 해당클래스를 active로 바꺼서 글자색을 바꺼주는 것입니다.

 

마지막으로 childern이건 뭐인가 싶을실텐데 즉 자식요소를 말하는겁니다. 

다른곳에서 <Form></Form>이런식으로 적으면 그냥 우리가 작성한 내용만 나오지만

<Form>hello</Form>를 적으면 우리가 작성한 내용에 children이 적힌 부분에 hello라는 내용이 찍혀서 나오게 됩니다.

우리는 이걸 이용해서 페이지마다 메뉴바를 만들어주는게  아닐 <Form>태그 내부에 작성해서자동으로 메뉴바가 생성되게 할것입니다.

오늘은 여기서 Form을 마치겠습니다.

마지막으로 작성한 모양 

내일은 내용이 다소 많으니 각오하고 와주세요 ㅎㅎ