component 재사용

구조가 유사하게 반복될 경우 이미 만들어진 컴포넌트를 재사용이 가능하다. 전체적인 틀이 비슷하되 일부가 다를 경우, 다른 부분을 컴포넌트화 시켜서 변화를 준다.

각 페이지를 임포트 했을때, ㅇㅇ 부분을 등록과 수정으로 변경하여 사용할 수 있다.

false : 새로 등록하는 페이지

isEdit으로 지금 현재 상태 전달 (props)

true : 수정

return isEdit으로 지금 현재 상태 전달 (props)

화면에 보여질 페이지

{props.isEdit ? "수정":"등록"}페이지
isEdit으로 받아온 값에 따라 글자 변경
{props.isEdit ? true:false}

폴더

새글 등록하기 페이지 (등록하기 버튼 클릭) - 등록된 상세페이지 (수정하기 버튼 클릭)- 수정하기 페이지 (수정완료 버튼 클릭) - 수정된 상세페이지

새글 등록하기 페이지와 수정된 상세페이지는 같은 컴포넌트를 재활용한다.

return isEdit으로 지금 현재 상태 전달 (props)

value값으로 string, bollean, number 전부 가능
불러오고자 하는 페이지가 3가지 이상일 경우 true/ false가 아니라 따로 값을 지정해주는것이 좋다
페이지 1
페이지 2
페이지 3

---

props.aaa === “사과” && (

)
props.aaa === “딸기” && ()
props.aaa === “바나나” && ()