8일차 - 컴포넌트 재사용

export&import, component, props, 삼향 연산자 등의 개념을 사용하시면 어렵지 않게 하나의 컴포넌트를 재사용할 수 있습니다.
컴포넌트를 불러와서 사용해주기 위해 각각 등록페이지(index)와 등록페이지의 컴포넌트(container)와 프레젠터(persenter)를 만들어주었습니다.

index.tsx (등록페이지)

import Component from "../../src/components/units/example/Component.container"

const ComponentNewPage= () => {
  return (
    <Component />
  )
}

export default ComponentNewPage

Component.container.tsx

import ComponentUI from "./Component.presenter";

const Component = () => {
  return <ComponentUI />;
};

export default Component;

Component.presenter.tsx

const ComponentUI = () => {
  return (
    <>
      <div>
        <h1>등록페이지</h1>
        제목 <input type="text" />
        <br />
        내용 <input type="text" />
        <br />
        <button>등록하기</button>
      </div>
    </>
  );
};

export default ComponentUI;

이 컴포넌트를 사용해서 등록하기 페이지와 수정하기 페이지를 만들어보겠습니다.
우선 수정하기 페이지를 만들어서 component를 불러오겠습니다.

index.tsx (수정페이지)

import Component from "../../src/components/units/example/Component.container"

const ComponentEditPage= () => {
  return (
    <Component />
  )
}

export default ComponentEditPage

이렇게만 사용한다면 등록하기 페이지와 동일하게 출력됩니다.
다르게 해주기 위해서 props와 삼향 연산자를 사용하는 것 입니다.
각각의 페이지에서 isEdit을 수정하기 페이지일 경우 true, 등록하기 페이지일 경우 false로 주고 이 값을 컴포넌트로 넘겨줍니다.

index.tsx (등록페이지)

import Component from "../../src/components/units/example/Component.container"

const ComponentNewPage= () => {
  return (
    <Component isEdit={false} />
  )
}

export default ComponentNewPage

index.tsx (수정페이지)

import Component from "../../src/components/units/example/Component.container"

const ComponentEditPage= () => {
  return (
    <Component isEdit={true} />
  )
}

export default ComponentEditPage

컴포넌트에서 받은 isEdit을 다시 presenter로 넘겨주어 이 값에 따라 true면 수정, false면 등록이 보이도록 해주면 됩니다.