Component 재사용하기

페이지를 컴포넌트로 나눠주면 다른 곳에서 재사용이 가능하다는 장점이 있다.
export/import, component, props, 삼항 연산자 등의 개념을 사용하면 하나의 컴포넌트를 재사용할 수 있다.

1. 컴포넌트를 사용할 페이지에서 각각 컴포넌트를 불러온다.
   이때, 각각의 컴포넌트를 어떻게 불러와야 하는지(어떤 페이지인지)를 알 수 있는 정보를 component에 함께 전달한다.

// container - 등록 화면
return(
	<Component isEdit={false}/>
	)

// container - 수정 화면
return(
	<Component isEdit={true}/>
	)

2. component에서는 받은 값(여기서는 isEdit)을 다시 presenter로 넘겨주고,

3. presenter에서는 이 값에 따라서 화면을 구성하기 위해 삼항 연산자 등으로 분기한다.(여기서는 true이면 '수정', false이면 '등록'이라는 글자가 보이면 된다.)

// presenter
<h1>{props.isEdit ? "수정" : "등록"}페이지</h1>