웹 개발에서 컴포넌트의 스타일링은 어플리케이션의 사용자 경험을 크게 좌우한다. 때로는 스타일링된 컴포넌트에 추가적인 상태나 속성을 도입해야 하는 경우가 생기는데, 이는 특히 React와 TypeScript를 사용하는 환경에서 중요한 고려 사항이다. 오늘은 TypeScript에서 Styled Components를 활용할 때 흔히 발생할 수 있는 사용자 정의 속성 관련 문제 해결 방법을 살펴보려한다.

사용자 정의 속성

HTML 표준에는 존재하지 않지만, 우리가 스타일링 목적으로 정의하는 속성들.

이 글에서는 스타일링 목적으로 개발자가 임의로 구현한 속성들을 의미한다.

1. 문제 상황.

React 컴포넌트에 사용자 정의 속성을 추가하고자 할 때, 예를 들어 active라는 상태를 스타일링에 사용하고자 한다고 가정해보자.

const Tab = styled.button`
    ${({ active }) => active && `
    	/* active 상태일 때의 스타일 */
  `}
`;

그리고 아래와 같이 이 컴포넌트에 active 속성을 추가하려고 하면..

<Tab active={isActive}>Tab</Tab>

TypeScript error: 'active' 속성이 없습니다.ts(2769)

위와 같은 에러 메시지가 출력된다.

2. 속성에 대한 타입을 명시적으로 선언해주어야 한다.

문제의 원인은 TypeScript 컴파일러가 active 속성의 타입을 인식하지 못해서 발생하는 문제이다. 해결책은 인터페이스를 정의하고 Styled Components의 제네릭 타입으로 전달하는 것.

interface TabProps {
  active: boolean;
}

const Tab = styled.button<TabProps>`
  ${({ active }) => active && `
    	/* active 상태일 때의 스타일 */
  `}
`;

이렇게 함으로써, 컴파일러는 Tab 컴포넌트가 active 속성을 인식하게 되며, 에러는 발생하지 않는다.

3. 결론.

Styled Components를 사용하여 스타일링을 적용할 때, HTML 표준에 존재하지 않는 사용자 정의 속성을 컴포넌트에 추가하려면, 해당 속성의 타입을 명시해야 한다. 이 접근법은 스타일링을 유연하고 안전하게 만들며, 대규모 애플리케이션의 일관성 유지에도 기여한다.

4. 사용자 정의 속성과 DOM

const Tab = styled.button<TabProps>`
  ${({ active }) => active && `
    	/* active 상태일 때의 스타일 */
  `}
`;  
  
<Tab active={isActive}>Tab</Tab>

active와 같은 사용자 정의 속성은 HTML 표준에 존재하지 않는 속성이다. 이런 속성들이 브라우저 렌더링 과정에 그대로 사용된다면 성능의 저하 혹은 예상하지 않은 동작 등이 일어날 가능성이 존재한다.

그렇기에 Styled Components는 HTML 표준에 존재하지 않는 사용자 정의 속성을 필터링하여 DOM에 반영하지 않도록 처리하게 된다. 이것은 성능 저하나 예상치 못한 동작을 방지하고, 개발자가 컴포넌트 스타일링을 자유롭게 할 수 있도록 지원한다. 개발자는 이로 인하여 웹 개발의 복잡성을 줄이고, 더욱 깨끗하고 유지보수 가능한 코드를 작성할 수 있다.