[REACT] 하나의 컴포넌트로 여러 페이지 다르게 구현하기

컴포넌트란 무엇일까?

컴포넌트 : 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위

하나의 페이지를 구현할 때 여러개의 컴포넌트를 활용하여 만들면 재사용이 가능하다는 장점을 갖는다.

 

여러 페이지에 필요한 헤더를 컴포넌트 폴더에 생성했다.

import React from "react"
import { Row, Col } from "reactstrap"
import { css } from "@emotion/react"

const HeaderCss = css`
  text-align: center;
  div {
    background-color: rgba(116, 172, 62, 0.12);
    border: 1px solid rgba(30, 20, 13, 0.2);
  }
`

const Header = React.memo(props => {
  const item = props.storedSharedItem
  console.log(item)

  return (
    <div css={HeaderCss} className="mb-3">
      <Row>
        <Col md="6" sm="auto" className="text-center m-auto">
          <br />
          <h2>리스트 [{item}]</h2>
          <p>inthyes</p>
        </Col>
      </Row>
    </div>
  )
})

export default Header

storedSharedItem을 props로 받고, item 변수로 이 값을 할당한다. 

 

아래의 코드는 위의 헤더 컴포넌트를 페이지에서 사용하는 방법이다.

import한 후, 원하는 위치에 Header와 Header컴포넌트에 넘겨줄 값을 함께 지정해서 전달해준다.

import Header from "../components/Header"

<생략>

return (
    <div>
      <Header storedSharedItem={sharedItem} />
      </div>

 

컴포넌트를 사용하면 사용하지 않을 때와 결과는 동일하다.(당연하다.)

컴포넌트 사용은 모듈화를 통해 컴포넌트를 재활용하고, 쉽게 코드를 수정하기 위함이다.

콘솔창을 통해 Header에서의 console도 잘 출력되는 것을 확인할 수 있다.

파일 구조는 아래와 같다.

 

컴포넌트의 목적은 위에서 설명한것과 같이 여러 페이지에서 사용이 가능해야한다.

 

storedSharedItem이 존재할 때와 아닐 때로 구분하여 출력이 가능하다.

const ProductHeader = React.memo((props) => {
  const { storedSharedItem, customHeaderText } = props; // Destructure the props
  console.log(storedSharedItem);

  return (
    <div css={HeaderCss} className="mb-3">
      <Row>
        <Col md="6" sm="auto" className="text-center m-auto">
          <br />
          {storedSharedItem ? (
            <div>
              <h2>리스트 [name : {storedSharedItem}]</h2>
              <p>inthyes</p>
            </div>
          ) : (
            <div>
              <h2>{customHeaderText}</h2>
              <p>doublehyes</p>
            </div>
          )}
        </Col>
      </Row>
    </div>
  );
});

컴포넌트를 잘 활용하면 폴더 관리가 쉬워지고 수정 및 보완이 간편해진다.