[React|Refactor|TRACK1] 컴포넌트 나누기
TRACK1 리팩토링 이야기, 컴포넌트 나누기
1월부터 기능 개발을 위하여 힘써온 우리! 드디어 4개월간의 리팩토링 기간을 허락받았다.
처음에는 디자인이 나오자마자 개발에 들어가기도 했고, 2주 안에 프로젝트를 완성해야했기에 컴포넌트 분리가 잘 안되었다.
기능과 페이지가 늘어날 수록 Props Drilling과 함수 로직 꼬임과 같은 여러 문제들이 발생했고, 우리는 백지상태로 돌아가 리팩토링을 시작하기로 했다.
무턱대고 개발하는 것에 도가 트여있던 나는.. 컴포넌트 나누기부터 쉽지가 않다.
4개월, 리팩토링 기간동안 많이 공부하고 적용해보며 성장하고 싶다. 간간히 블로그도 올리면서!
컴포넌트 개념
우리는 회의를 통해 컨벤션에 대해 다시 이야기를 나누었고,
그 과정에서 컴포넌트를 나누는 것에 대해 공부했고, 언니 오빠들이 공유해준 지식들을 흡수(이론적으로만..)할 수 있었다.
- 컴포넌트 나누는 기준
- 기능별 1개의 컴포넌트(기능이 있으면 무조건 분리하자!)
- mocules 분자 단위의 구분 - 우리의 약속 (atom, organism, templete)
원래 아토믹 디자인 패턴이 존재하는 것 같다.
@pages에 컴포넌트 안에 자잘한 컴포넌트들은 부모 자식이 아닌 같은 level로 담으려 노력하기. (엄청난 props를 막기 위해)
컴포넌트 나누기
나는 프로필 수정 페이지를 먼저 작업하게 되었다.
- 먼저 기능들을 파악하고, 다른 페이지에 어떻게 사용되는지 확인했다.
- 컴포넌트의 구조를 담아보았다.
- 이렇게 분리해야겠다고 마음을 먹고 실제 페이지로 담아보려했는데, 생각보다 막막하고 쉽지않았다.
실제 파일이 이런식으로 분리되었는데, 코드리뷰를 받고나서 무언가 잘못되었음을 깨달았다.
우선, common으로 분리되어야하는 아이들이 대다수였고,
leftcontainer와 rightcontainer의 이름이 좋지 않다는 평을 받았다.
추가적으로 너무 과하게 컴포넌트가 분리되었다. 같은 기능을 가지는 컴포넌트들도 모두 분리되었기 때문이다.
친절하게 네모박스까지 쳐서 코드리뷰해준 오빠! 감사합니다!
이번에는 같은 기능을 가지는 컴포넌트들은 한데 묶어서 다시 분리해보아야겠다. 이것저것 생각이 많은데 최적의 컴포넌트를 설계하고 싶다!