styled-components 의 상속 방식과 props 전달 방식 중 어떤 방식을 택해야 할까요 ?

Question

안녕하세요 ! React와 styled-components를 사용해서 웹 프론트엔드 개발을 하던 도중 의문점이 두 가지가 생겼습니다 !첫번째는, 하나의 wrap에 여러 개의 버튼이 있는 모달을 만들면서 든 의문점인데요,위와 같이 같은 스타일을 가지고 있고, 스타일의 변경점이 없지만 이 컴포넌트가 어떤 버튼인지 알려주기 위해서 상속을 통해 네이밍을 하는 것이 맞을지,아니면 이런식으로 같은 스타일을 굳이 네이밍할 필요가 없는지가 궁금했었습니다 !두번째 질문은, 첫번째 의문점을 다른 개발자 분들께 여쭤봤을때 받았던 피드백에 대해서 생긴 의문점인데요,피드백 해주신 내용이, 나였으면 여러 개의 컴포넌트를 상속을 통해서 만드는 것보다, 하나의 컴포넌트에서 props를 통해 조건부 스타일링을 통해 분기할 것 같다고 말씀해 주셨습니다.보통 저는 사용자와의 상호작용을 통해 스타일이 변할 때 prop를 사용해 스타일링을 한다고 생각했어서,정적인 스타일을 props로 전달하는게 좋은건가? 하는 의문점이 먼저들었습니다.우선 제 생각은 정적인 스타일을 props로 분기한다면 inline-style 방식처럼 코드의 재사용성 과 유지보수가 힘들어질 것 같다 였지만,아직 저는 초보 개발자이고 모르는 부분이 훨씬 많아서, 다양한 분들의 생각을 듣고 싶었습니다 !결국에는같은 스타일을 가지는 컴포넌트를 어떤 버튼인지 알려주기 위해서 상속을 통해 네이밍을 하는 것이 맞을지,정적인 스타일을 상속 방식으로 새로운 컴포넌트를 만드는 것보다 props를 통해 하나의 컴포넌트에서 스타일을 분기하는게 더 나은 방식인지이 두가지에대한 여러분의 의견이 궁금합니다 !

몰랑토끼 · Answer

1. ui변경점이 없으면 어떤 버튼인지 굳이 알려줄 필요는 없습니다. 네이밍도 쓸데없이 1, 2 가 붙고요. 1, 2 이런 숫자들은 스타일드가 아닌 정적 클래스네이밍방식으로도 쓰지 않습니다. ui는 행동으로 분류되지 않습니다. 첫번째 사진 네이밍이 잘못되었네요. Btn은 하나에 props를 전달해서 ui를 변경합니다. 예를 들어 2. ui스타일링을 담당하는 코드는 props로 받아야 가독 및 유지보수가 좋습니다. 사용자의 상호작용으로 변경될때는 기본 props가 있는 상태에서 작용이 있을때 변경합니다.

styled-components 의 상속 방식과 props 전달 방식 중 어떤 방식을 택해야 할까요 ?

1개의 답변

#styled-components 목록