[코드캠프 2주차] 컴포넌트 재사용하는법

[컴포넌트 재사용하는 법]

컴포넌트는 구조가 동일한 컴포넌트를 여러번 만드는것이 매우 비효율적이다.

만약에 수정페이지와 등록페이지의 구조가 둘다 동일한데, 두개의 페이지중 하나의 변경사항이 존재한다고 했을때, 컴포넌트를 재사용을 하지 않는다면 하나하나 전부 컴포넌트를 복붙해야 한다.
작업상에 매우 비효율적이다.

따라서 컴포넌트를 재사용 함으로써 좀더 효율적으로 컴포넌트를 관리할수 있다. 공통으로 사용되는 컴포넌트를 하나 생성 한 후 각자 용도에 맞게 다르게 컴포넌트를 렌더링 시켜주면 된다.
그렇다면 용도에 맞게 컴포넌트에 다른 값들을 넣어줄수 있을까?? 방법은 props를 사용해서 값을 전달해 주면 된다. props로 값을 전달 해준 후 삼항연산자를 사용하여 JSX 부분에다가 다르게 렌더링을 시켜주면 된다.

//수정페이지 
import React from "react";
import BoardComponent from "../../src/components/units/board/08-board-component/BoardComponent";
const BoardEditPage = () => {
  return <BoardComponent isEdit={true}></BoardComponent>;
};
export default BoardEditPage;

//등록페이지 
import React from "react";
import BoardComponent from "../../src/components/units/board/08-board-component/BoardComponent";
const BoardNewPage = () => {
  return <BoardComponent isEdit={false}></BoardComponent>;
};
export default BoardNewPage;

//삼항 연산자를 이용한 조건에 따른 렌더링
import React from "react";

const BoardComponent = (props) => {
  const { isEdit } = props;
  return (
    <div>
      <h1>{isEdit === true ? "수정" : "등록"}페이지</h1>
      제목:<input type="text"></input>
      <br />
      내용:<input type="text"></input>
      <br />
      <button>{isEdit === true ? "수정" : "등록"}하기</button>
    </div>
  );
};
export default BoardComponent;

위의 코드에서는 수정페이지 인지 등록페이지 인지를 판별하기 위해 isEdit를 Props로 넘겨주었고 true/false에 따라서 삼항연산자를 이용하여 글씨만 다르게 렌더링을 시켜주었다.
사용 용도만 다르고 레이아웃은 동일한 컴포넌트를 생성해야 할때는 꼭 이 방법을 사용하여 작업을 진행하면 유지보수에도 큰 도움이 될 것같다.