숙련자분들은 리액트로 컴포넌트 작업할 때 어디까지 컴포넌트화 하시나요?

Question

이전 회사에서는 리액트를 안 썼어서 제가 따로 독학했어고 그 뒤에 리액트를 실무로 써본건 지금 회사가 처음인데 지금 회사는 p태그랑 div, span까지 전부 컴포넌트로 만들어서 각 컴포넌트에 module.css로 기본 스타일 잡아놓고서 시안에서 들어가는 스타일은 클래스 주거나 컴포넌트에 props로 스타일 값 넘겨서(fontSize라는 props를 등록해 놓고 컴포넌트에서 fontSize={10} 이런식으로 넘김.) html 태그 자체에 style 값 주는게 엄청 많더라고요. 근데 이렇게 할거면 테일윈드나 부트스트랩 쓰는게 낫지 않나 하는 궁금증이 드는데 물론 사이트 규모랑 재사용성 측면 따져서 컴포넌트화가 들어가는게 당연하지만 숙련자분들이나 다른 곳에선 컴포넌트를 어디까지 세분화 하는지 궁금합니다.

Rhio Kim · Answer

저는 잘게 쪼개거나 분리한다는 개인의 기준에 의해서 영향을 많이 받아서 그다지 선호하지 않아요.테일윈드를 쓰는게 낫지 않나? 라는 의문이 곧 답이라고 샹각하는데요.디자인시스템을 정의하는 컴포넌트는 업계 표준을 최대한 지키거나, 잘된 프레임워크를 채택하는 방식이고,비즈니스적인 컴포넌트 재사용이나 유지보수 용이히도록 하는 것은 저는 개인적으로는 최대한 page route 로 모듈 경계로 제한하고 최대한 분리하지 않습니다.성급한 분리는 되려 불필요한 개인의 기준과 잠재적 개념이 주입되어서 유지보수가 어렵다고 생각하기 때문에요.물론 이건 한 페이지 내의 기능 복잡도가 1000 line 내외 일때, 협업자가 1,2명일때이구요.그렇지 않은 경우는 상황에 따라 몹시 달라질꺼라 봐요. 내용처럼 잘게 쪼갠사례는 아마 자체 디자인 시스템을 구축한듯한데 이럴때는디자인 시스템 컴포넌트로 나눌것과 비즈니스 컴포넌트로 나눌것에 따라서 그 세세함이 달라질듯 해요.오키를 기준으로 현재 이 질문 게시물 패이지의 복잡도라면페이지 컴포넌트공통(헤더, 푸터, 양 사이드)게시글 내용 댓글 에디터댓글 목록대댓글 목록이렇게 큼지막하게 분리하고 최대한 유지할 것같아요.

몰랑토끼 · Answer

p div span 으로 나누는건 컴포넌트로써의 의미가 없어요. 진짜 레고 블록을 만드는거여서 정해진 규격은 있지만 그 외로도 유연하게 할수있어야되죠.가장 유명한건 토스고 그 보다 작은 회사들도 내부에 디자인시스템을 만드는곳들이 많아요. 외부에서 쓰이는 antd 나 mui는 지들만 편하려고 쓰는거여서 실제로 쓰면 불편투성이고, 비즈니스 컴포넌트는 실제 샘플 데이터도 넣어가며 잘돌아가는지 테스트를 해보면서 만들어집니다. page 단위는 일반적으론 절대 안써요. (atomic에서만 일부 사용되나 atomic은 단점도 보유)스토리북기반의 디자인시스템 만들어보고, 그걸 npm 으로 다른사람들이 받아서 쓸때 어떻게 해야 편하게 쓸수있는지를 생각해보세요. 예를 들어 드롭다운(필터나 목록등)은 목록이 열린상태에서 외부클릭하면 닫혀야 하죠? 근데 그 닫히는 기능을 내부에 정의할지. 외부에 정의할지등을 고려해보세

논현크루 · Answer

개발 스타일과 일하는 환경에 영향을 많이 받아서 천차만별입니다저는 객체지향 프로그래밍을 너무 싫어해서(재미없음) 마이크로 서비스 개발만 합니다그래서 모듈화 최대한 안 합니다

숙련자분들은 리액트로 컴포넌트 작업할 때 어디까지 컴포넌트화 하시나요?

3개의 답변

#reactjs 목록