[React] 컴포넌트와 props 사용하기1

아래 이미지와 같이 게시물이 없을때 노출되는 화면에서

보여지는 레이아웃의 스타일은 같고, 이미지와 텍스트만 달라지는 경우

컴포넌트와  props를 적용해보았다.

 

 

 

[components]

function NoResult(props) {
  return (
    <article className={styles.no_result}>
      <Image src={props.url} alt="검색 결과 없음" width={120} height={120} />
      <p>{props.text}</p>
    </article>
  )
}

export default NoResult

화면 레이아웃 마크업을 해주고,

같은 레이아웃 내에서 변경될 부분 에 props를 적용해주었다.

img 의 URL : {props.url}

하단 텍스트 : {props.text}

 

+) 컴포넌트는 무조건 최상위 태그가 있어야하고,

최상위 태그가 필요없을 시 <React.Fragment></React.Fragment> 으로 감싸 줄 수 있다

 

 

 

 

 

[page]

//event.js

import NoResult from '../../../../components/webview/NoResult'

<NoResult
  url="/img/event_img_empty.png"
  text="이벤트를 준비 중이에요"
/>

//notice.js

import NoResult from '../../../../components/webview/NoResult'

<NoResult
  url="/img/notice_img_empty.png"
  text="공지사항이 없어요"
/>

최상단에 components를 불러와주고,

컴포넌트에서 선언한 function명 NoResult와

{props.url} : url="/img/event_img_empty.png"

{props.text} : text="이벤트를 준비 중이에요"

를 넣어주었다.

 

{props.name} : name="페이지 별 변동 내용"