[ 23 ] 컴포넌트 재사용하기 실습

게시글 등록, 수정 을 컴포넌트 재활용하지 않고 만드는 안좋은 예시 

export default function BoardNewPage() {
  return (
    <>
      <h1>등록페이지</h1>
      제목 : <input type="text" />
      내용 : <input type="text" />
      <button>등록하기</button>
    </>
  );
}

export default function BoardEditPage() {
  return (
    <>
      <h1>수정페이지</h1>
      제목 : <input type="text" />
      내용 : <input type="text" />
      <button>수정하기</button>
    </>
  );
}

 

컴포넌트를 재활용해서 게시글 등록, 수정 페이지 만들기 

 

09-board-component

 

재사용 가능한 컴포넌트

export default function BoardComponent(props) {
  return (
    <div>
      <h1>{props.name}페이지</h1>
      제목 : <input type="text" />
      내용 : <input type="text" />
      <button>{props.name}하기</button>
    </div>
  );
}

 

import 후 사용 예시 코드 

import BoardComponent from "../../../src/components/units/board/09-board-component";

export default function BoardNewPage() {
  return <BoardComponent name="등록" />;
}

import BoardComponent from "../../../src/components/units/board/09-board-component";

export default function BoardEditPage() {
  return <BoardComponent name="수정" />;
}