Vue.js에서 CSS-in-JS를 사용하는 방법은 무엇인가요?

Q1: Vue.js에서 CSS-in-JS란 무엇인가요?
A1: CSS-in-JS는 JavaScript 파일 내에서 직접 스타일을 작성하고 관리하는 기법입니다. Vue.js에서 CSS-in-JS를 사용하면 컴포넌트 단위로 스타일을 캡슐화하고, 동적 스타일을 쉽게 구현할 수 있습니다.

Q2: Vue.js에서 CSS-in-JS를 어떻게 시작하나요?
A2: Vue.js 기본 설정에는 CSS-in-JS가 내장되어 있지 않기 때문에, 별도의 라이브러리를 설치해야 합니다. 대표적인 라이브러리로는 `vue-styled-components`, `emotion`, `styled-components` (React용이지만 일부 Vue 호환 포크가 있음), `vue-emotion` 등이 있습니다.

Q3: 대표적인 Vue용 CSS-in-JS 라이브러리는 무엇이 있나요?
A3:
- `vue-styled-components`: React의 styled-components와 비슷한 API를 Vue에 맞게 구현한 라이브러리입니다.
- `vue-emotion`: Emotion 라이브러리를 Vue에서 사용할 수 있게 한 래퍼입니다.
- `styled-vue`: 작지만 유용한 Vue 스타일 컴포넌트 라이브러리입니다.

Q4: `vue-styled-components`를 사용하는 기본 예시는?
A4:
```javascript
import styled from 'vue-styled-components';

const buttonProps = { primary: Boolean };

const StyledButton = styled('button', buttonProps)`
background: ${props => (props.primary ? 'blue' : 'gray')};
color: white;
padding: 10px;
border-radius: 5px;
`;

export default {
components: { StyledButton },
template: `Primary Button`
};
```

Q5: CSS-in-JS를 사용할 때의 장점은 무엇인가요?
A5:
- 스타일이 컴포넌트에 밀접하게 위치해 코드 가독성 향상
- JavaScript 변수와 함수를 이용한 동적 스타일 적용 가능 - 스타일 중복/충돌 최소화
- 조건부 적용 및 테마 구현에 용이

Q6: 단점이나 주의점은?
A6:
- 초기 러닝커브와 설정 복잡성
- 런타임에 스타일이 생성되어 성능에 영향을 줄 수 있음
- 대규모 프로젝트에서는 스타일 관리 방법을 미리 설계할 필요 있음

Q7: Vue 3에서는 어떻게 사용하나요?
A7: Vue 3에서도 위 라이브러리들이 지원되며, Composition API와 함께 사용할 수 있습니다. `vue-styled-components`는 Vue 3용 버전도 배포되어 있어 동일한 방식으로 사용할 수 있습니다. 예를 들어:
```javascript
import styled from 'vue-styled-components';

const StyledDiv = styled.div`
color: red;
`;

export default {
setup() {
return { StyledDiv };
},
template: `Hello CSS-in-JS!`
};
```

Q8: Scoped 스타일 대신 CSS-in-JS를 써도 되나요?
A8: 네, 가능하지만 scoped 스타일이 Vue 내장 기능으로 가벼운 사용에 적합합니다. CSS-in-JS는 동적 스타일이나 복잡한 테마 관리가 필요한 경우에 더 적합합니다.

Q9: CSS-in-JS 외에 Vue에서 동적 스타일을 주는 다른 방법은 무엇이 있나요?
A9:
- `:style` 바인딩을 사용해 인라인 스타일 지정
- `:class` 바인딩을 동적 클래스 적용
- `