코드캠프 부트캠프 8일차

컴포넌트의 재사용

우리는 계속해서 하나의 페이지를 componenet, presenter, queries와 styles 파일로 나누어서 작성했다. 이처럼 파일을 분리하여 관리하고 작성하는 이유가 뭘까?
바로 협업과 유지보수를 위함이다. 이렇게 함으로써 styles가 이상하면 styles파일로, gql이 이상하면 queries파일로 가면 되는 것이다.

날짜표시함수와 같이 반복적이고 공통적으로 사용하게 되는 함수를 한 곳에 저장하여 협업하는 사람들과 함께 사용하는 방법도 있다.
그렇게 된다면 협업을 하는 사람들이 import를 이용하여 그 기능을 손쉽게 불러올 수 있다.

컴포넌트의 재사용하는 것을 게시글 페이지로 예를 들어보자.
게시글을 작성해서 등록하는 페이지와 등록된 게시글을 수정하는 페이지의 스타일을 바꾸고자 한다. 이때 하나의 component를 사용하여 등록페이지에 import하고 수정페이지에 import하여 사용하게 된다면 component하나의 스타일을 변경하여도 등록페이지와 수정페이지 모두 수정된 스타일로 표현할 수 있다.

그리고 나서 component파일에 변수와 값을 줘서 삼항 연산자를 통해 import하는 등록페이지와 수정페이지에 각각 다른 값을 출력해주면 되는 것이다.

위의 코드를 보면 props.isEdit을 통해 부모컴포넌트로부터 isEdit의 값이 true인지 false인지 확인하여 true일 경우 수정하기를, false일 경우 등록하기를 출력하게끔 한 것을 볼 수 있다.