styled-component을 사용할 때 많은 props는 어떻게 해결하시나요?

물론, 실제로 styled-component를 사용할 때 많은 소품을 깔끔하게 정리하기 위한 몇 가지 팁이 있습니다. 유틸리티 구성 요소를 사용하십시오. 유틸리티 구성요소는 공통 스타일 세트를 제공하는 구성요소입니다. 예를 들어 다음 스타일을 제공하는 플렉스 컨테이너용 유틸리티 구성 요소를 만들 수 있습니다. display: flex flex-direction: row gap: 1rem 테마를 사용하십시오. 테마는 구성 요소의 스타일을 지정하는 데 사용할 수 있는 미리 정의된 스타일 집합입니다. 예를 들어 다음 스타일을 포함하는 프로젝트의 테마를 만들 수 있습니다. primaryColor: blue secondaryColor: red textColor: black 디자인 시스템을 사용합니다. 디자인 시스템은 일관되고 사용자 친화적인 인터페이스를 구축하는 데 사용할 수 있는 재사용 가능한 구성 요소, 스타일 및 문서의 모음입니다. Material Design 및 Bootstrap과 같이 널리 사용되는 디자인 시스템이 많이 있습니다. 린터를 사용하십시오. Linter는 코드에서 오류를 찾아 수정하는 데 도움이 되는 도구입니다. 많은 linter에는 코드의 가독성과 유지 관리성을 개선하는 데 도움이 되는 규칙이 있습니다. 예를 들어 ESLint 린터에는 긴 코드 줄을 사용하지 않도록 도와주는 규칙이 있습니다. 일관된 명명 규칙을 사용하십시오. 일관된 명명 규칙을 사용하면 코드를 더 읽기 쉽고 유지 관리할 수 있습니다. 예를 들어 소품에 다음 명명 규칙을 사용할 수 있습니다. camelCase구성 요소에 전달되는 소품의 경우 kebab-case구성 요소의 스타일을 지정하는 데 사용되는 소품의 경우 주석을 사용하십시오. 주석은 코드가 수행하는 작업을 설명하는 데 도움이 될 수 있습니다. 예를 들어 특정 소품의 목적을 설명하는 주석을 추가할 수 있습니다. 코드를 더 작은 파일로 나눕니다. 큰 파일은 읽고 유지 관리하기 어려울 수 있습니다. 각 구성 요소 또는 관련 구성 요소 그룹에 대해 별도의 파일을 만들어 코드를 더 작은 파일로 나눌 수 있습니다. 코드 탐색 및 리팩터링 기능이 있는 코드 편집기를 사용합니다. 코드 탐색 및 리팩터링 기능이 있는 코드 편집기를 사용하면 코드를 보다 빠르고 쉽게 변경할 수 있습니다. 예를 들어 변수 또는 함수의 정의로 빠르게 이동할 수 있는 기능이 있는 코드 편집기를 사용할 수 있습니다. 디버거를 사용하십시오. 디버거는 코드를 한 줄씩 단계별로 실행하고 변수 값을 검사하는 데 도움이 될 수 있습니다. 이는 코드의 문제를 디버그하려고 할 때 유용할 수 있습니다. 라고 bard가 대답했습니다.

자주 사용되는 스타일 집합을 테마형태로 묶어서 사용하는 방법 정도가 유효하지 않을까 싶습니다. 예를 들면, display:flex, justify-content:center, align-items:center 같이 중앙정렬을 하기위해 자주 사용되는 스타일을 centerBox ( props ) 가 true 일때 사용되도록 테마형태로 축약표현을 할수 있을것 같습니다. 이렇게 되면 외부에서 주입하기 위한 스타일 값 (문자열형태로 내려주는 props) 를 좀더 줄일수 있겠네요. 스타일링을 외부에서 props 로 전달받아 커스텀 할수있는 범위가 넓을수록, 전달받는 props 도 많아 지고 손이 많이 가는것은 어찌보면 피할수 없는 일이 아닐까 싶습니다. 또한 필수적으로 받지 않아도 되는 값은 optional 하게 전달 받도록 설계해서 (ex: props 에 gap 값이 없어도 문제없도록 되도록 타입 지정) 필요하지 않은 css 는 굳이 props를 내려주지 않아도 되도록 해주면 될것 같아요. 단순히 스타일링용 props 만 좀 줄여서 표현하고 싶으시다면, 2번 코드처럼 spread 해서 쓸수도 있긴 합니다. 하지만 저는 별로 좋아하지 않는 표현 방식입니다.. 나중에 어떤 props 를 전달하고 있는지 추적하기가 어려워져서 수정이나 디버깅에 불편함이 많습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 1. 테마형태로 사용하는 예시

const Style = styled.div<{centerBox : boolean}>`
  ...
  ${(props) => {
    if (props.centerBox === true) {
      return "display:flex; justify-content:center; align-items:center;";
    }

      return "";
  }}
`

// 2. 스타일링 props 를 spread
// props 에 대한 타입은 임의로 지정했습니다.
// props 로 내려줄 스타일링 객체가 정적이라면 컴포넌트 내에 객체 리터럴을 만들 필요는 없습니다.
// styled 내부에 state 값을 props 로 넘겨 처리해도 상관없습니다.

const TempComponent = () => {
  const [isClick, setIsClick] = useState(false);

  const props : FlexContainerStyledPropsType = {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      backgroundColor : isClick ? "#ccc" : "#fff"
  }

  return <FlexContainerStyle onClick={()=>{setIsClick((state) => !state)}} {...props} />
}

styled-components를 사용하다보면 props가 많아져서 코드의 가독성이 떨어질 수 있습니다. 이를 해결하기 위해 다음과 같은 팁들을 사용할 수 있습니다. 1. 재사용 가능한 스타일 함수 생성 재사용 가능한 스타일 함수를 생성하면 props를 중복해서 작성하지 않아도 되므로 가독성을 높일 수 있습니다. 예를 들어, 위에서 작성한 FlexContainerAlign와 FlexContainerStyle 컴포넌트는 동일한 속성을 가지고 있습니다. 이럴 때는 재사용 가능한 스타일 함수를 만들어 사용하는 것이 좋습니다. 아래 코드에서 flexContainerStyles 함수는 FlexContainer, FlexContainerAlign, FlexContainerStyle에서 공통으로 사용되는 속성을 모아놓은 것입니다. 2. Props를 객체로 전달하기 styled-components에서는 props를 객체 형태로 전달할 수 있습니다. 이를 활용하면 props의 개수를 줄일 수 있습니다. 예를 들어, FlexContainerStyle 컴포넌트에서 justifyContent, alignItems, background, gap, styles를 객체로 묶어 전달할 수 있습니다. 이렇게 작성하면 props의 개수를 줄이고, 가독성을 높일 수 있습니다. 3. 컴포넌트를 분리하기 속성이 많은 컴포넌트를 여러 개의 컴포넌트로 분리해서 사용할 수도 있습니다. 예를 들어, FlexContainer 컴포넌트에서 gap 속성을 제거하고, Gap 컴포넌트를 따로 만들어 사용하는 것입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
#1
const flexContainerStyles = css`
  display: flex;
  flex-direction: ${({ col }) => (col ? 'column' : 'row')};
  gap: ${({ gap }) => gap && `${gap}rem`};
`;

const FlexContainer = styled.div<FlexContainerProps>`
  ${flexContainerStyles};
`;

const FlexContainerAlign = styled(FlexContainer)<FlexContainerAlignProps>`
  justify-content: ${({ justifyContent }) => justifyContent};
  align-items: ${({ alignItems }) => alignItems};
`;

const FlexContainerStyle = styled(FlexContainerAlign)<FlexContainerStyleProps>`
  background-color: ${({ background }) => background && theme.colors.grey};
  ${({ styles }) => styles && { ...styles }};
`;


#2
const FlexContainerStyle = styled(FlexContainerAlign)<FlexContainerStyleProps>`
  ${({ flexContainerStyle }) => ({
    backgroundColor: flexContainerStyle?.background && theme.colors.grey,
    gap: flexContainerStyle?.gap && `${flexContainerStyle.gap}rem`,
    justifyContent: flexContainerStyle?.justifyContent,
    alignItems: flexContainerStyle?.alignItems,
    ...flexContainerStyle?.styles,
  })}
`;

#3
const Gap = styled.div<GapProps>`
  ${({ gap }) => gap && `margin: ${gap}rem`};
`;

const FlexContainer = styled.div<FlexContainerProps>`
  display: flex;
  flex-direction: ${({ col }) => (col ? 'column' : 'row')};
`;

const FlexContainerAlign = styled(FlexContainer)<FlexContainerAlignProps>`
  justify