[React] 페이지 개발 - 문의하기

페이지 개발 - 문의하기

 계속해서 사이트맵에서 정의한 메뉴의 페이지를 하나씩 작성하도록 하겠습니다. 먼저 페이지에 들어갈 구성요소부터 정하고 하나씩 붙여보도록 하겠습니다.

작업 내용

• 페이지 폴더, 스크립트 생성
• 사이트맵 연결
• 페이지 내용 작성- Content, Bottom

페이지 구성 - 공통

 페이지는 [Content, Bottom] 2부분으로 구성이 되어집니다. 헤더부분은 component로 미리 구성된 드롭다운 메뉴에 추가하는 방식이고 메뉴 연결이 끝나면 연결된 페이지 내용이 표시되게 됩니다. 작업 내용과 같이 index에 페이지를 선언하고 Header에 연결한 후 페이지 내용(content, bottom) 내용을 작성합니다. 영역은 아래 그림과 같습니다. 내가 작성할 부분이 어느 부분인지 참고하시기 바랍니다. 👌

 모든 작업은 vscode에서 실행합니다. vscode에서 Control + ` 를 누르고 터미널이 실행된 상태로 #npm start 를 입력하여 브라우저에 실행시킵니다.

1. 페이지 폴더, 스크립트 생성

• 페이지를 생성할 때는 views/ 폴더에 만들 페이지 폴더와 스크립트를 생성합니다. 앞으로 만들게 될 페이지들도 같은 작업으로 이루어 지게 됩니다. views 폴더에 마우스 오른쪽 클릭 new folder, new file을 이용하여 폴더와 메뉴를 생성합니다.

2. 사이트맵 연결

• 사이트맵 구성과 같이 코드를 작성하는 방법과 순서입니다.
• index.js 파일의 페이지 연결 코드 추가
• components/Header 폴더의 HeaderLinks.js 파일의 메뉴 코드 추가

• index.js 파일의 페이지 연결 코드 추가

 사이트맵에 내용과 동일한 부분이며 이번에는 import의 component명을 HistoryPage라 작성하고 Router의 Switch테그에 path 는 /history-page, component는 HistoryPage로 작성합니다. 이후 사이트안에서 HistoryPage를 사용하면 작성한 path로 연결이 되며 url에는 / 뒤에 path로 표시되게 됩니다.

• HeaderLinks.js 파일의 메뉴 코드 추가

 HeaderLinks.js의 <List> 태그를 작성합니다. 나머지 부분은 미리 작성한 코드라 연두색 태두리 안에 코드를 작성하도록 합니다. 여기까지 공통적인 내용이며 연두색 부분을 유심히 보시고 앞으로 페이지 생성 후 연결할때 어떤식으로 작성하는지 유심히 살펴 보시기 바랍니다.

3. 페이지 내용 작성 - Content, Bottom

• Content
• 이제 본격적으로 페이지 개발이 시작됩니다. 페이지 구성의 중간 부분이죠
• import는 페이지에서 사용할 컴포넌트를 선언합니다. 여기서는 가장 기본적이고 고정적으로 들어가는 코드를 작성합니다. [필수 import]

/*eslint-disable*/

import React from "react";

// nodejs library that concatenates classes

import classNames from "classnames";

// @material-ui/core components

import { makeStyles } from "@material-ui/core/styles";

import List from "@material-ui/core/List";

import ListItem from "@material-ui/core/ListItem";

// @material-ui/icons

import Favorite from "@material-ui/icons/Favorite";

import PinDrop from "@material-ui/icons/PinDrop";

import Phone from "@material-ui/icons/Phone";

import BusinessCenter from "@material-ui/icons/BusinessCenter";

// core components

import Header from "components/Header/Header.js";

import HeaderLinks from "components/Header/HeaderLinks.js";

import GridContainer from "components/Grid/GridContainer.js";

import GridItem from "components/Grid/GridItem.js";

import InfoArea from "components/InfoArea/InfoArea.js";

import CustomInput from "components/CustomInput/CustomInput.js";

import Button from "components/CustomButtons/Button.js";

import Footer from "components/Footer/Footer.js";

import contactUsStyle from "assets/jss/material-kit-pro-react/views/contactUsStyle.js";

 코드에서 보시는 것처럼 기본적으로 사용했던 header 태그도 위와 같이 header 컴포넌트를 import해서 사용하는 것입니다. core components라해서 header, footer, griditem.....등등 페이지를 만들기 위해 기본적으로 material kit에서 스크립트와 스타일을 작성해 놓은 부분을 쉽게 import해서 사용하기만 하면 됩니다. 아 물론 사용하기 위해서는 어떻게 구성되 있는지 살펴본 후에 가능하겠지요. 천천히 글을 보며 작성하시면서 살펴보시면 익숙해지실 겁니다. import에서 from 뒤에 경로에 실제 컴포넌트 코드가 있으며 앞으로의 글들에서는 코드를 하나씩 살펴보도고 사용을 어떻게 해야되는지 알려드리겠습니다.

• 내용 - 실제로 표시할 내용

export default function ContactUsPage({ ...rest }) {

...

}

 이런식으로 function을 만들고 {...} 안에 내용은 html로 작성할 수 있습니다. 우리는 import한 훌륭한 컴포넌트들이 많이 있으므로 이를 활용하도록 하겠습니다. react에서는 function을 호출하여 안의 html을 랜더링하여 브라우져에 표시를 합니다. 처음이라 익숙하지 않을것인데 저와 같이 페이지를 만들어 보며 조금씩 살펴보도록 하겠습니다.

 안의 코드는 샘플로 나온 코드를 붙여 넣도록 하겠습니다. 시간이 나면 수정하면서 코드안에 주석을 통하여 계속하여 업데이트 하도록 하겠습니다. 👀😇😇

<Header

brand="LINGSSOFT"

links={<HeaderLinks dropdownHoverColor="dark" />}

fixed

color="dark"

/>

<div className={classes.bigMap}>

<CustomSkinMap />

</div>

<div className={classNames(classes.main, classes.mainRaised)}>

<div className={classes.contactContent}>

<div className={classes.container}>

<h2 className={classes.title}>Send us a message</h2>

<GridContainer>

<GridItem md={6} sm={6}>

<p>

You can contact us with anything related to our Products. We

{"'"}ll get in touch with you as soon as possible.

<br />

<br />

</p>

<form>

<CustomInput

labelText="Your Name"

id="float"

formControlProps={{

fullWidth: true,

}}

/>

<CustomInput

labelText="Email address"

id="float"

formControlProps={{

fullWidth: true,

}}

/>

<CustomInput

labelText="Phone"

id="float"

formControlProps={{

fullWidth: true,

}}

/>

<CustomInput

labelText="Your message"

id="float"

formControlProps={{

fullWidth: true,

}}

inputProps={{

multiline: true,

rows: 6,

}}

/>

<div className={classes.textCenter}>

<Button color="primary" round>

Contact us

</Button>

</div>

</form>

</GridItem>

<GridItem md={4} sm={4} className={classes.mlAuto}>

<InfoArea

className={classes.info}

title="Find us at the office"

description={

<p>

Bld Mihail Kogalniceanu, nr. 8, <br /> 7652 Bucharest,{" "}

<br /> Romania

</p>

}

icon={PinDrop}

iconColor="primary"

/>

<InfoArea

className={classes.info}

title="Give us a ring"

description={

<p>

Michael Jordan <br /> +40 762 321 762 <br /> Mon - Fri,

8:00-22:00

</p>

}

icon={Phone}

iconColor="primary"

/>

<InfoArea

className={classes.info}

title="Legal Information"

description={

<p>

Creative Tim Ltd. <br /> VAT · EN2341241 <br /> IBAN ·

EN8732ENGB2300099123 <br /> Bank · Great Britain Bank

</p>

}

icon={BusinessCenter}

iconColor="primary"

/>

</GridItem>

</GridContainer>

</div>

</div>

</div>

• Bottom
• 솔루션 페이지 글에서 만든 소스를 그대로 사용하도록 합니다. 하단글은 고정된 영역이기 때문에 한부분이 변경되면 삽입된 모든 페이지의 코드를 변경합니다. (물론 개발자의 마음이지만...일반적인 경우) 💪💪

 솔루션 페이지 글에서 작동이 되더라도 뭔가 어색한 부분이 있다고 하였는데 이유는 탬플릿 코드를 그대로 이용하였기 때문입니다. 페이지 글이 모두 게시되면 추가 형태로 하나씩 추가하도록 하겠습니다.

 여기까지 페이지 개발 - 문의하기 과정이 끝났습니다. 코드 작성이 들어가며 글이 점점 길어지고 있습니다. 앞으로 더 길어질 듯 싶습니다. react에 대한 기본적인 개념도 꿀팁 형태로 작성해 보도록 하겠습니다.

 다른 부분이 있으면 문의하기를 통하여 남겨주세요.

    이전    목록    다음

history

20231007 : 목록 네비게이션 추가