[React] 꿈 일기 기록 사이트 제작 일지-2. 리액트 프로젝트 시작 및 페이지 만들기, 라우터 설정, 공용 컴포넌트 설정

리액트 설치

npx create-react-app my-app

 

라우터

라우터 설치

npm install react-router-dom --save

 

만들어야 할 페이지는 메인 페이지, 일기 작성 페이지, 일기 수정 페이지, 일기 개별 조회 페이지로 총 4개이다.

페이지를 만들고 라우터에 각 페이지와 url을 매핑한다.

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} exact />
          <Route path="/new" element={<New />} exact />
          <Route path="/edit/:id" element={<Edit />} exact />
          <Route path="/diary/:id" element={<Diary />} exact />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

이제 url과 각 페이지가 매핑되었다.

공용 컴포넌트 생성

웹 사이트에 전체적으로 쓰일 버튼과 상단의 헤더, 카드 컴포넌트를 생성한다.

헤더에는 왼쪽 버튼, 중앙의 텍스트, 오른쪽 버튼의 요소가 들어간다.

import "./Header.css";

const Header = ({ leftBtn, headText, rightBtn }) => {
  return (
    <header>
      <div className="header-left-btn">{leftBtn}</div>
      <div className="header-text">{headText}</div>
      <div className="header-right-btn">{rightBtn}</div>
    </header>
  );
};
export default Header;

 

버튼은 취소, 뒤로 가기 버튼(negative), 저장하기, 수정하기 버튼(positive), 추가하기(plus) 버튼으로 타입을 달리 하여 css를 설정했다. 

import "./Button.css";

const Button = ({ type, text, onClick }) => {
  //버튼 종류 3가지(취소:negative, 완료:positive, 추가:plus)
  return (
    <button className={`Button ${type}`} onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;

.Button {
  cursor: pointer;
  border: none;
  border-radius: 5px;

  padding: 10px 20px;

  font-size: 18px;
  color: #563a3d;
  background-color: transparent;

  white-space: nowrap;
  font-family: "Noto Serif KR";
}

.Button.negative {
  background-color: #b18c79;
}

.Button.positive {
  background-color: #764845;
}

.Button.plus {
  background-color: #975ab7;

  font-size: 14px;
}

 

카드 컴포넌트는 일기 내용을 wrap해줄 컴포넌트이므로 {props.children}을 사용한다.

import "./Card.css";

const Card = (props) => {
  return <div>{props.children}</div>;
};
export default Card;

 

헤더와 버튼을 적용해 본 결과는 아래와 같다.

 

페이지 생성 및 페이지 라우팅(React Router Dom) · Yoonyesol/Dream_note@ea2e0d9

 

공용 컴포넌트(Button, Header, Card) 생성 및 모든 페이지 공통 css 세팅 · Yoonyesol/Dream_note@121ef3a