인프런 커뮤니티 질문&답변
작성한 질문수
리액트 컴포넌트 분리 기준
해결된 질문
작성
·
70
0
안녕하세요! 한입 타입스크립트부터 강의 잘 듣고 있습니다.
현재 퍼블리셔로 일하고 있는데요, 선택자형 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를 이용하여 컴포넌트를 더욱 모듈화하고, 스타일을 각 컴포넌트와 같이 정의하여 관리할 수 있습니다.
추가 참고 자료
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다:
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.