코드를 짜면서 프로그래머는 같은 코드를 재사용할 때, 크게 두 가지 정도의 방법이 있습니다.

  1. Hard Copy
  2. import-export

하드 카피의 경우 쉽고 간단하게 사용할 수 있다는 장점이 있지만, 프로그램의 입장에서 해당 프로그램이 무거워진다는 단점과 같은 코드를 사용하는 프로그램을 고쳐야 하는 경우가 생길 때 카피된 모든 코드를 고쳐야한다는 단점이 있습니다.

따라서 코드를 재사용할 때, 재사용하려는 코드를 가진 파일을 export하여 내보내고 사용하려는 파일에서 해당 코드를 가진 파일을 import하고 사용하려는 코드만 뽑아서 사용을 합니다.

이런 재사용은 JavaScript에서도 똑같이 사용합니다.

React를 통해서 만들어진 페이지는 페이지를 위한 Logic 부분과 출력을 위한 HTML 부분이 나누어져 있습니다. 여기서 logic이 적혀있는 부분을 Container로, html 부분을 presentation으로 나누어서 재사용성을 높입니다.

js파일을 container와 presentation을 나누어서 가지는 장점은 다음과 같습니다.

  1. 코드의 재사용성 향상
  2. 쉬운 에러 확인

일부분만 다른 모습의 페이지를 구성하는 경우 props에 boolean과 같은 비교를 위한 인자를 실어 보내고, 하나의 presentation 파일을 import할 때, 서로의 페이지에서 달라지는 부분에 대해서 삼항 연산자 등의 조건에 대해 서로 다르게 작동을 하도록 작성을 해주면, 같은 코드이지만 서로 다른 결과물을 가지는 페이지를 구성할 수 있습니다.

export default function BoardWritePage() {
    return(
        <BoardWrite isEdit={false}></BoardWrite>
    )
}

export default function BoardEditPage() {
    return(
        <BoardWrite isEdit={true}></BoardWrite>
    )
}

게시판에서 글을 작성하는 페이지와 수정하는 페이지는 아주 유사합니다. 페이지의 타이틀, 그리고 수정하기 혹은 작성하기 버튼 정도의 UI만 다르고 나머지 UI는 같습니다.

index 파일을 처음 구성할 때 같은 container에서 값을 받아오지만, Container에 같은 이름을 가지는 props를 보내는데 다른 값을 가지고 있습니다. 각각의 페이지에서는 isEdit는 다른 같은 페이지를 불러옵니다.

페이지를 구성하기 위해서 container는 다시 presenter에게서 페이지를 구성하기 위한 코드를 가져옵니다. 이때, container는 다시 한번 isEdit 값을 props를 통해 presenter에게 전달하여 가져오는 코드 안에서 isEdit의 true / false 값에 따라서 다른 UI를 그리도록 합니다.

가장 간단한 방법은 다음과 같습니다.

{props.isEdit ? "게시물 수정" : "게시물 등록"}

삼항 연산자를 사용해서 수정페이지일 경우 타이틀을 '게시물 수정'이라고 표시하도록 합니다.

onClick={props.isEdit ? props.onClickEdit : props.onClickRegistrationButton}

그 외에도 onClick을 실행했을 때, 전달 받은 props의 isEdit 값에 따라서 다른 ClickEvent가 일어나도록 변경하는 것도 가능합니다.

0개의 댓글