개발자
안녕하세요 ! 팀원과 Emotion으로 컴포넌트 작업을 하는데 스타일이 서로 달라서 갑자기 궁금해졌는데.... 아래의 두가지 방식중 어느 방식이 더 괜찮은 방식인지 궁금해서 질문 남깁니다 ! 1. @emotion/styled 활용 const Component = styled.div` background-color: blue; color: white; ` export default function Badge({ text }: any) { return <Badge>{text}</Badge> } 2. @emotion/react 활용 const badgeStyles = css` background-color: blue; color: white; ` export default function Badge({ text }:any) { return <div css={css([badgeStyles])} >{text}</div> } 이렇게 간단하게 두가지 예시를 적어봤습니다 ! 읽어주셔서 감사합니다 :)
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 09월 20일
두 방식 모두 Emotion 라이브러리를 사용하여 CSS-in-JS 스타일링을 하는 유효한 방법입니다. 어느 한 가지를 권장하는 것은 어렵지만, 상황에 따라 적합한 방법을 선택하시면 됩니다. @emotion/styled 을 사용하면 컴포넌트의 재사용성을 높일 수 있습니다. 이 경우, 단순한 div 대신 명시적으로 이름이 지정된 컴포넌트(such as "Badge")를 생성합니다. 이로 인해 코드의 가독성이 높아지고, 특정 스타일이 반복적으로 사용되는 경우 재사용하기 좋습니다. 반면에 @emotion/react의 css prop은 조건부 스타일링을 하거나 동적인 값을 다룰 때 유용합니다. 즉, 상태 또는 속성에 따라 스타일 변화가 필요할 때 자유롭게 스타일 조작을 할 수 있어 유연성이 높습니다. 결국 프로젝트의 요구 사항과 개발 팀의 선호도에 따라 선택하시면 됩니다!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!