지금까지 같은 디자인을 반복적으로 사용해야되는 페이지들을 제작할때, 재사용 가능한 컴포넌트를 아래와 같이 만들었었다
.style.ts를 만들고 각각의 View나 Text같은 element들에 style-components사용해 css를 집어 넣었다 .
또 .tsx파일을 만들어 각각의 element들에 children을 담을 수 있는 컴포넌트로 만들었다.
그리고 *_design.tsx에 각 페이지를 또 하나의 컴포넌트로 디자인을 하였다.
나름 잘했다라고 생각하고 코드리뷰떄 자랑스럽게 보였더니 지적받았다.
내가 짠 코드는 물론 재사용은 가능하지만 copy paste로 재사용 해야한다.
내가 짠 코드로 재사용을 하게 되면 코드의 줄이 불필요하게 많아지고 컴포넌트에 공통적으로 적용되는 확실한 ‘규칙’이란게 존재하지 않아 보인다라고 하였다. 리엑트스럽지 못하다는 평을 받았다
리엑트 스럽다는 내용은 아래와 같다
React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다.
이러한 컴포넌트에서는 특수한
children
prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋습니다.
위 내용은 리엑트 공식 웹사이트에서 한 말이다 component vs inheritance
분명히 리엑트 공부를 하면서 읽은 적이 있었는데 지금까지 제대로 이해하지 못하고 있었던 것이다
그러니 리엑트에서 추천하는 것은 페이지들의 기준이 되는 컴포넌트를 하나 만들고 props를 사용하여 각 페이지들을 구현하는 것을 추천한다는 이야기였다
공식 웹사이트 가이드라인을 최대한 따라서 리펙토링을 해보려 했다.
아래의 4개의 파일로 구현을 하였다
1. question_page_basic_layout.style.ts
각 element들의 css를 styled-components를 이용해 정의하였다.
2. question_page_basic_layout.tsx
-
에서 만든 컴포넌트들을 이용하여 공통된 페이지 컴포넌트를 만든다.
처음 만들때 헤맨 부분은
어느 특정한 페이지에서는 그 페이지 고유만의 css가 필요하는데 이건 어떻게 관리하느냐 였다.
위에 대한 해결책으로 props의 type에 jsx.element를 따로 정의해주고 그 부분만 따로 컴포넌트를 만들어서 관리하면 된다.
3. question_page_designs.tsx
- 에서 만든 컴포넌트를 이용하여 각 페이지의 데이터들을 집어 넣는다. 이를 문서에서는 ‘특수화’라고 하고 있다.
이런 식으로 페이지 개수 대로 만들어주면 (위의 페이지는 9번째 페이지)통일된 디자인을 가진 페이지들이 완성된다.
4. question_page_logics.ts
페이지에 공통적으로 쓰이는 로직을 컴포넌트에 저장하지 않고, 한번에 유지보수를 할 수 있도록 클래스를 통해 객체를 따로 만들어서 저장하였다
위에서 사용한 questionPageLogic은 global logics에 함께 저장해 context-api로 앱의 최상단에서 뿌려주게 했다.
