리액트 컴포넌트 분리 기준
안녕하세요! 한입 타입스크립트부터 강의 잘 듣고 있습니다.
현재 퍼블리셔로 일하고 있는데요, 선택자형 CSS(.container .section { ... }) 방식에 익숙하다 보니,reset-password와 forget-password처럼 UI가 거의 동일한 페이지에서 쓰이는 컴포넌트들을 분리해서 쓰고 싶다는 생각이 듭니다.
예를 들어,
function PageTitle({ children }: { children: ReactNode }) {
return <div className="text-xl font-bold">{children}</div>;
}
이런 식으로 스타일 관점에서 컴포넌트를 분리하는 것은
리액트 환경에서는 지양되는 방식인지 궁금합니다.
답변 2
2
안녕하세요 이민혁님 이정환입니다.
우선 지양되는 방식은 전혀 아닙니다!
컴포넌트 분리에 대한 기준은 명확하지 않고 보통 팀 단위, 개인 단위 또는 프로젝트 단위로 달라지기 때문에 이렇게 분리하시는 방향이 편하시다면 그렇게 작업하시는것도 좋은 방법이 될 수 있을 것 같습니다
PS. 저는 개인적으로 컴포넌트를 분리할 때에 기능을 중심으로 분리하는 편이라 요렇게 작업하였습니다!
1
안녕하세요, 인프런 AI 인턴입니다. 이민혁님.
리액트에서는 컴포넌트를 분리할 때 다양한 기준을 적용할 수 있으며, 스타일을 기준으로 컴포넌트를 분리하는 것도 유효한 방법입니다. 특히, UI와 스타일이 공유되는 컴포넌트는 재사용성과 유지보수성을 높이기 위해 별도로 분리하는 것이 바람직합니다.
리액트 컴포넌트 분리 기준
재사용성: 여러 곳에서 동일한 스타일이나 기능을 구현해야 한다면, 이를 컴포넌트로 분리하여 코드 중복을 줄일 수 있습니다.
PageTitle과 같은 컴포넌트는 여러 페이지에서 재사용할 수 있는 좋은 예입니다.일관성: 스타일의 일관성을 유지할 수 있도록 반복되는 UI 패턴을 공통된 컴포넌트로 만들어 관리하면, 나중에 스타일을 변경해야 할 때 모든 곳을 일관되게 업데이트할 수 있어 편리합니다.
유지보수성: 컴포넌트를 잘게 분리하면 스타일이나 로직이 변경될 때 특정 컴포넌트만 수정하면 되므로 유지보수성이 높아집니다.
스타일이 주요한 기준이라면, CSS Modules이나 Styled-Components를 이용하여 컴포넌트를 더욱 모듈화하고, 스타일을 각 컴포넌트와 같이 정의하여 관리할 수 있습니다.
추가 참고 자료
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다:
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
회원가입 구현 (구현 후 최종 화면 출력 X)
0
65
2
(6.11) 회원가입시 프로필 정보 자동 생성하기 Q. 호출 순서 문의
0
56
1
명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이
0
58
2
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
70
2
6.8 zustand 세션 질문입니다.
0
110
2
next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?
0
93
2
shadcn에서 radix ui와 base ui 차이는 뭔가요?
1
406
2
updateTodo 함수 생성시 화살표 함수 사용 안하는 이유
0
84
2
4.11 바로 투두 삭제가 안됨 질문
0
102
3
매개변수 updatedTodo 관련 질문
0
79
3
인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!
0
91
2
supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!
0
85
2
4.6 id를 string으로 변경시 오류
0
74
2
리액트 타입스크립트 관련 질문있습니다.
0
71
1
소셜 로그인 구현하기 관련하여 질문이 있습니다!
0
108
2
ui 파일 질문드립니다.
0
90
1
tanstack query devtools에서 질문있습니다!
0
75
2
댓글 삭제 시 isPending 질문
0
72
2
두번째 예외상황에 대해 질문있습니다!
0
70
1
리액트 쿼리 질문입니다
1
85
2
개발자도구에서 components 가 안보입니다.
0
109
3
state 관리에 대한 정리
0
88
3
[(2.4) Shadcn/ui를 소개합니다] 강의 Shadcn 세팅 관련 질문 있습니다.
0
213
3
like 테이블에서 왜 create_at이 필요한지 궁금합니다.
0
87
1