styled-component 공통컴포넌트 재사용 관련 포트폴리오 프로젝트

Question

안녕하세요 선배님들 6개월간 많은 배움끝에 포트폴리오를 제작하여 취업문에 발들이려 하는 취준생입니다포트폴리오 제작 과정에서 styled-components를 사용 하기로 마음 먹었는데요그 과정에서 컴포넌트를 나누는 방식에 관해 조언 좀 여쭙고자 합니다 case 1 공통컴포넌트 파생컴포넌트 같이 한곳에 묶기Wrap 이란 공통 컴포넌트가있을때 Wrpa을 재사용한 컴포넌트를 한곳에 넣는게 좋을까요 .. ? case 2 공통컴포넌트와 해당 도메인관련 sytyles에 따로 분리해 적기 Wrap 기본은 common 폴더에 두고 해당 도메인 에서 사용하는식으로 구현하는게 좋을까요 어떤 방법이 더나을까요 .. 제가생각하기엔 공통컴포넌트 사용하는 컴포넌트를 한곳에 넣으면 관리는 쉽겠으나 파일 라인 사이즈가 너무방대해질거같고그렇다고 도메인 별로 하나하나 분리해서 컴포넌트를 만들자니 너무 추적하기 어려울거같아 혹시나 실무에선 어떻게적용하시나요 .. ? 아니면 제 방법이 틀렸다면 과감하게 채직찔 해주십시오 긴글 읽어 감사합니다 (_ _)

JengYoung · Accepted Answer

자세한 디렉토리 구조는 모르겠으나, 주어진 사진만 보고 판단한다면 일단 변수명을 보았을 때는 구체성이 강해서 2번에서 도메인 안에서 관리할 것 같네요 :)또한 말씀하신 것처럼 styles.ts로 관리하는 경우도 많은 편입니다 :)사실 다 장단점이 있어서 이유가 있다면 그냥 한 곳에서 관리해주어도 무방하다고 생각하는 편이에요.공통컴포넌트 사용하는 컴포넌트를 한곳에 넣으면 관리는 쉽겠으나 파일 라인 사이즈가 너무방대해질거같고혹여나 1번의 방법으로 하고 싶었는데 이 부분이 고민이라면, common에 Wrap이라는 디렉토리를 또 만들어서 그 안에서 관리하면 되겠네요 :)ex) Wrap - default.styles.ts , a.styles.ts, b.styles.ts...

범주 · Answer

보통 하나하나 분리합니다.스토리북같은 디자인시스템을 활용하면 관리가 쉬워요

코린이듈리 · Answer

A라는 컴포넌트가 있다면 A라는 폴더를 만듭니다.그 아래에 index.tsx, A.tsx, A.style.tsx 이런식으로 컴포넌트를 만듭니다.그러면 관리하기도 편해집니다!

styled-component 공통컴포넌트 재사용 관련 포트폴리오 프로젝트

3개의 답변

#styled-components 목록