리액트 컴포넌트 이렇게까지 작게 사용하는게 맞나요?

Question

책으로 리액트를 공부하는데 궁금한 점이 생겨서 질문 올립니다.앞서 기본기능들을 학습하고책 진도가 이제 일기장 웹 앱 만들기를 시작했습니다.재사용되는 요소들을 컴포넌트로 만드는건 이해되는데책 예제의 컴포넌트의 크기가 너무 작은거 같아서요...컴포넌트에는 단 1개의 button 태그만 들어있구요,이 button 태그 1개에 문구 텍스트 / 색깔 타입 / onclick 이벤트 부분을 props를 줘서 재사용하고 있어요.심지어 Button.js라는 별도의 파일에 작성해서 사용하고 있어요.이게 책 예제라서 컴포넌트 활용을 보여주려고 그런건지아니면 원래 이렇게까지 작은 부분까지 컴포넌트를 사용하는지 궁금합니다...Button.jsconst Button = ({type, text, onClick}) => { const btnType = ["positive", "negative"].includes(type) ? type : "default"; return ( ); }; export default Button;Home.jsconst Home = () => { return (

{ alert("positive button"); }} /> } rightChild={

); }; export default Home;

몰랑토끼 · Accepted Answer

저 버튼 컴포넌트는 잘못설계되어 있긴한데 저정도로 작게 하는거 맞습니다. 사전적 의미로 정의된건 아니지만 재사용할수있는 가장 작은 단위로 생각하면 됩니다.

파이리v · Answer

아토믹 디자인 패턴이라는 컴포넌트 설계 기법이 있습니다. 아래 링크 참고해보세요!https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/

초밥먹고싶다 · Answer

작게한게아니라 버튼이 여러곳에 사용되니 만든거같은데요?

리액트 컴포넌트 이렇게까지 작게 사용하는게 맞나요?

3개의 답변

기술 목록