개발자

안녕하세요 Emotion 컴포넌트 관련해서 질문있습니다 ! (어느방식이 괜찮은 방식일까요?)

2023년 09월 20일조회 77

안녕하세요 ! 팀원과 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> } 이렇게 간단하게 두가지 예시를 적어봤습니다 ! 읽어주셔서 감사합니다 :)

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

방재호님의 프로필 사진

코드 컨벤션은 워낙 팀바팀, 회바회, 프로젝트별로 달라지는 거라... 어떤 것이 더 괜찮다고 말씀드리기가 뭣 하네요 🥸 만약 기존에 작성된 코드가 있다면 그 컨벤션 그대로 따라가는 것이 좋고, 그게 아니라 새로 시작하는 프로젝트라면, 선임분에게 컨벤션을 하나 정해달라고 해서 그 방향대로 작성하셔도 괜찮습니다. 하지만 선임이 없으면 질문자님이 하나 정해서 이렇게 하자고 주장해도 되죠

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2023년 09월 20일

두 방식 모두 Emotion 라이브러리를 사용하여 CSS-in-JS 스타일링을 하는 유효한 방법입니다. 어느 한 가지를 권장하는 것은 어렵지만, 상황에 따라 적합한 방법을 선택하시면 됩니다. @emotion/styled 을 사용하면 컴포넌트의 재사용성을 높일 수 있습니다. 이 경우, 단순한 div 대신 명시적으로 이름이 지정된 컴포넌트(such as "Badge")를 생성합니다. 이로 인해 코드의 가독성이 높아지고, 특정 스타일이 반복적으로 사용되는 경우 재사용하기 좋습니다. 반면에 @emotion/react의 css prop은 조건부 스타일링을 하거나 동적인 값을 다룰 때 유용합니다. 즉, 상태 또는 속성에 따라 스타일 변화가 필요할 때 자유롭게 스타일 조작을 할 수 있어 유연성이 높습니다. 결국 프로젝트의 요구 사항과 개발 팀의 선호도에 따라 선택하시면 됩니다!

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!