[React] 리팩토링 - 컴포넌트 역할 분리

컴포넌트를 분리하여 구조를 개선을 하는 이유:
코드의 가독성과 유지보수성을 향상시켜 코드 퀄리티를 올리기 위해 

면접을 보러갔다가 컴포넌트 구조와 관련해서 좀 더 개선해보면 좋을 것이라는 조언을 받았습니다.

 

어제 하루는 FE팀원들과 상의하여 어떤 방식의 컴포넌트 구조가 좋은 것인지 각자 찾아보고 고민하는 시간을 가졌고, 오늘부터 수정을 시작했습니다. 

 

리액트 공식홈페이지에서는 아래와 같이 컴포넌트를 표현하고있습니다. 

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

컴포넌트는 UI를 독립적이고, 재사용 가능한 부분으로 분리해주며 각각을 고립시켜 생각할 수 있게 해줍니다.

https://legacy.reactjs.org/docs/components-and-props.html

Components and Props – React

"독립적", "재사용 가능하도록 분리", "고립시켜 생각"

각각의 조각들을 분리시켜 생각하게 한다라...

 

많은 자료들을 살펴본 결과 의존성을 잘 관리한 컴포넌트가 좋은 컴포넌트인 것 같습니다. 

 

의존성이란?

 개발에서의 의존성이란 어떤 것과 다른 것이 변경에 있어서 서로 영향을 주고받는 관계를 의미합니다.

불필요한 의존성을 제거하거나 약화시키고, 불가피하게 강하게 의존되는 요소들은 가깝게 두는 것이 의존성관리의 요점이라고합니다. 

 

첫번째로, 제가 하기로한 작업은 자신이 아닌 다른 유저의 페이지를 방문했을 때 보여지는 FriendsMain컴포넌트를 각자 역할에 맞게 분리하는 것이었습니다. 

타인의 일정

기존의 컴포넌트 파일 구조입니다.

자신의 메인페이지를 구성하는 Main, MainScheduleCards 와 함께 Main 폴더 내에 있습니다. 

FriendsMain이라는 컴포넌트 내에 스케쥴내용이 담긴 카드인 FriendsScheduleCard컴포넌트로 구성되어있습니다. 

심지어 FriendsScheduleCard는 MainScheduleCards와 UI가 크게 다르지 않은데 중복되는 코드가 수십줄입니다!!!!

개선이 시급했어요!

그래서 가장 먼저 Friends ScheduleCard를 삭제하고 메인페이지의 ScheduleCard 컴포넌트 재사용하는 작업을 했습니다.

 

그 다음으론 젤라님의 스케쥴입니다! 라고 보여지는 헤더부분을 컴포넌트로 따로 분리 했어요.

(이 부분은 자신의 메인페이지와 UI 구조가 달라서 MainHeader컴포넌트를 재사용하지 않고 FriendsHeader로 빼서 팔로우한 유저일 때, 팔로우하지 않은 유저일 때 두가지 상황을 조건식으로 보여지게 했습니다.)

해당 header는 디자인이 수정될 가능성도 있어서 추후에 디자인 변경시에 편리하게 FriendsHeader컴포넌트 부분만 수정하면 되겠죠.

 

 

팔로우하고있지 않은 유저일 경우엔 403에러를 발생시켜 스케쥴을 볼 수 없게 되어있습니다. 

body부분을 200일 때와 403일 때로 조건식을 써서 컴포넌트를 분리했습니다.

 

status가 403일 땐 위의 화면이 보이고,

200일 땐 스케쥴 카드가 보이게 됩니다!

 

 

이렇게해서 첫번째 컴포넌트 구조개선작업이 끝났습니다. 

요약: 기존코드는 FriendsMain 하나의 컴포넌트내에서 status를 확인해 서버통신 및 전체 렌더링을 모두 처리하였으나 컴포넌트간 역할 분리작업 후 FriendsMain은 데이터를 schedule state에 저장하고 팔로우상태확인하여 렌더링여부 결정하는 역할만 하도록 변경