TypeScript를 이용한 Emotion Theming: Property ‘X’은(는) ‘object’ 타입에 존재하지 않습니다.
만약 TypeScript에서 Emotion Theming 작업 중 “Property ‘X’은(는) ‘object’ 타입에 존재하지 않습니다. ts(2339)”와 같은 오류 메시지를 만나게 된다면, 테마 설정의 중요한 단계를 빠뜨린 것일 수 있습니다. 이 블로그 포스트에서는 이 문제를 해결하고 Emotion Theming을 TypeScript와 원활하게 작업할 수 있는 방법을 알아보겠습니다.
문제: Emotion Theming을 위한 Prop TypeScript 어노테이션
기본적으로 Emotion에서 props.theme은 ‘any’ 타입 어노테이션을 가지고 있어 TypeScript 오류 없이 테마와 관련된 속성에 접근할 수 있습니다. 그러나 props.theme.colors.gray와 같은 중첩된 속성에 접근하려 할 때, TypeScript는 “Property ‘colors’은(는) ‘object’ 타입에 존재하지 않습니다. ts(2339)”와 같은 오류를 발생시킬 수 있습니다.
해결책: TypeScript에서 테마 설정하기
이 문제를 해결하기 위해서는 TypeScript에서 Emotion의 테마 인터페이스를 정의하고 확장해야 합니다. 다음의 단계를 따라 진행하세요:
단계 1: emotion.d.ts 파일 생성하기
프로젝트 내에 ’emotion.d.ts’라는 파일을 생성하세요 (일반적으로 TypeScript 구성 파일과 같은 디렉터리에 위치합니다). 이 파일은 Emotion Theming을 위한 유형 정의를 보관할 것입니다.
declare module '@emotion/react' {
export interface Theme {
colors: {
primary: string;
secondary: string;
};
}
}
이 예시에서는 중첩된 색상 속성(‘primary’와 ‘secondary’)을 가진 ‘Theme’ 인터페이스를 정의합니다. 필요에 따라 이 인터페이스를 수정하여 테마 설정을 개인화할 수 있습니다.
단계 2: 초기화된 테마 선언하기
Emotion 컴포넌트에서는 올바른 구조로 테마 객체를 초기화해야 합니다:
const theme = {
colors: {
primary: "#ff0000",
secondary: "#00ff00",
},
};
원하는 색상 코드로 색상 값을 대체하세요.
단계 3: ThemeProvider 적용하기
emotion-theming에서 제공하는 ThemeProvider 컴포넌트로 컴포넌트 계층 구조를 래핑하며, 테마 객체를 prop으로 전달하세요:
import { ThemeProvider } from "emotion-theming";
const App = () => (
<ThemeProvider theme={theme}>
{/* 컴포넌트 계층 구조 */}
</ThemeProvider>
);
이렇게 함으로써, 모든 ThemeProvider 래퍼 내의 컴포넌트에서 테마를 사용할 수 있습니다.
단계 4: 스타일드 컴포넌트에서 테마 속성에 접근하기
스타일드 컴포넌트에서는 TypeScript 오류 없이 테마 속성에 접근할 수 있습니다. 예를 들어:
import styled from "@emotion/styled";
const MyComponent = styled.div((props) => ({
color: props.theme.colors.primary,
}));
이제 TypeScript 오류가 발생하지 않고 중첩된 테마 속성에 접근할 수 있을 것입니다.
결론
이 블로그 포스트에서는 TypeScript에서 Emotion Theming을 사용할 때 “Property ‘X’은(는) ‘object’ 타입에 존재하지 않습니다. ts(2339)”와 같은 오류를 해결하는 방법에 대해 논의했습니다. 테마 인터페이스를 정의하고 확장함으로써 중첩된 테마 속성에 TypeScript 오류 없이 접근할 수 있습니다. 여기서 안내한 단계를 따라 진행하여 Emotion Theming을 TypeScript와 원활하게 작업하며 개발 경험을 향상시킬 수 있습니다.
이 블로그 포스트를 읽어주셔서 감사합니다. Emotion Theming과 TypeScript를 사용하여 발생한 문제를 해결하는 데 도움이 되었기를 바랍니다!
