<div id="readability-page-1" class="page"><div><h2 id="-들어가며">💡 들어가며</h2>
<blockquote>
TypeScript &amp; styled-components 사용 방법에 대해 정리했습니다 🤔
Next.js, TypeScript, styled-components 를 사용한 프로젝트에서 발생한 TS 에러를 해결하며 배운 점을 작성했습니다.
</blockquote>
 
<hr>
 
<h2 id="1-단일-props-사용-">1. 단일 props 사용 🎈</h2>
<blockquote>
컴포넌트에 타입 지정할 때 **styled.div&lt; {프롭스명 : 타입지정} &gt;**으로 작성해서 사용합니다.
</blockquote>
<pre><code>// styled-components 에 1개 props 타입지정
// const Container = styled.div&lt; {프롭스명 : 타입지정} &gt;``;

const Container = styled.div&lt; { age : number } &gt;`
 color: ${(props) =&gt; (props.age &gt; 20 ? 'red' : 'gray')};
`;</code></pre>
 
<hr>
 
<h2 id="2-다수-props-사용-">2. 다수 props 사용 ✨</h2>
<blockquote>
여러 개의 props 를 사용한다면 인터페이스를 사용하여 분리할 수 있습니다.
인터페이스로 분리하여 타입 지정을 한다는 것 이외에 사용법은 단일 props 와 같습니다.
</blockquote>
<pre><code>interface Container extends 상속타입 {
 isActive: boolean;
 age: number;
 프롭스명: 타입지정;
}

// styled-components에 interface 타입 지정하기

const Container = styled.div&lt;Container&gt;`
 color: ${(props) =&gt; (props.age &gt; 20 ? 'red' : 'gray')};
 background-color: ${(props) =&gt; (props.isActive ? 'red' : 'gray')};
`;</code></pre>
 
<hr>
 
<h2 id="3-프로젝트-적용-코드-">3. 프로젝트 적용 코드 💻</h2>
<blockquote>
실제 프로젝트에서 사용한 코드 예시입니다.
</blockquote>
<a href="https://github.com/mnxmnz/colfume-frontend/blob/develop/components/common/Header.tsx">Gihub 링크 😺</a>
<pre><code>import styled from 'styled-components';

function Header() {

... (생략)

 return (

 ... (생략)
 
 &lt;CategoryBtn
 id="Product"
 value="Product"
 onClick={onClickCategory}
 category={category}
 &gt;
 Product
 &lt;/CategoryBtn&gt;
 );
};

... (생략)

const CategoryBtn = styled.span&lt;{ value: string; category: string }&gt;`
 margin: 0 3rem;
 ... (생략)
`;

export default Header;</code></pre>
 
<hr>
 
<h2 id="-마치며">👏 마치며</h2>
<blockquote>
TypeScript &amp; styled-components 사용 방법을 예제와 함께 정리했습니다 🔮
1. 단일 props 사용 🎈 
2. 다수 props 사용 ✨ 
3. 프로젝트 적용 코드 💻
</blockquote>
 
<hr>
 
<h4 id="참고-자료-">참고 자료 📩</h4>
<a href="https://velog.io/@hwang-eunji/styled-component-typescript">Styled-component #3 with typescript</a>
<a href="https://medium.com/@trustyoo86/react%EC%97%90-typescript-%EC%A0%81%EC%9A%A9%EC%8B%9C-styled-components-%EC%9D%B4%EC%8A%88-bd365de17e13">react에 typescript 적용시 styled-components 이슈</a></div></div>

mnz.log

💡 들어가며
TypeScript & styled-components 사용 방법에 대해 정리했습니다 🤔
Next.js, TypeScript, styled-components 를 사용한 프로젝트에서 발생한 TS 에러를 해결하며 배운 점을 작성했습니다.
1. 단일 props 사용 🎈
컴포넌트에 타입 지정할 때 styled.div< {프롭스명 : 타입지정} >으로 작성해서 사용합니다.
// styled-components 에 1개 props 타입지정
// const Container = styled.div< {프롭스명 : 타입지정} >``;
const Container = styled.div< { age : number } >`
 color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
`;
2. 다수 props 사용 ✨
여러 개의 props 를 사용한다면 인터페이스를 사용하여 분리할 수 있습니다.
인터페이스로 분리하여 타입 지정을 한다는 것 이외에 사용법은 단일 props 와 같습니다.
interface Container extends 상속타입 {
 isActive: boolean;
 age: number;
 프롭스명: 타입지정;
}
// styled-components에 interface 타입 지정하기
const Container = styled.div<Container>`
 color: ${(props) => (props.age > 20 ? 'red' : 'gray')};
 background-color: ${(props) => (props.isActive ? 'red' : 'gray')};
`;
3. 프로젝트 적용 코드 💻
실제 프로젝트에서 사용한 코드 예시입니다.
Gihub 링크 😺
import styled from 'styled-components';
function Header() {
... (생략)
 return (
 ... (생략)
 <CategoryBtn
 id="Product"
 value="Product"
 onClick={onClickCategory}
 category={category}
 >
 Product
 </CategoryBtn>
 );
};
... (생략)
const CategoryBtn = styled.span<{ value: string; category: string }>`
 margin: 0 3rem;
 ... (생략)
`;
export default Header;
👏 마치며
TypeScript & styled-components 사용 방법을 예제와 함께 정리했습니다 🔮
1. 단일 props 사용 🎈
2. 다수 props 사용 ✨
3. 프로젝트 적용 코드 💻
참고 자료 📩
Styled-component #3 with typescript
react에 typescript 적용시 styled-components 이슈

[React] TypeScript & styled-components 사용 방법

댓글