styled-components를 적용하려면
664
작성한 질문수 4
styled-components를 적용하려면 꼭 스타일을 위한 component를 만든다음에 그걸로 감싸야하나요?
그렇게 사용하다보면 리액트 콤포넌트와 스타일 콤포넌트가 섞여서 헷갈리지 않을까요?
답변 4
0
안녕하세요, 정상구님. 소플입니다.
styled-components를 통해 만들어진 컴포넌트는 이름 그대로 '스타일이 입혀진 컴포넌트'가 됩니다.
웹사이트를 개발하다보면 일반적인 컴포넌트의 경우에도 스타일을 필수적으로 입히게 되는데,
아래와 같이 직접 컴포넌트에 style 속성을 넣어주거나,
<Greeting style={{ background: "red" }} />
또는 별도의 CSS파일을 만들어 놓고, className속성을 사용해서 넣어줄 수 있습니다.
.red-background {
background: red;
}
<Greeting className="red-background" />
하지만 styled-components는 애초에 스타일이 입혀진 상태로 컴포넌트를 생성해주기 때문에,
실제 컴포넌트의 코드가 조금 더 간결해진다는 장점이 있습니다.
그리고 컴포넌트의 이름이 곧바로 들어가기 때문에 가독성이 올라간다는 장점도 있습니다.
const StyledGreeting = styled(Greeting)`
background: red;
`;
<StyledGreeting />
어차피 스타일을 입히는 작업은 필요한데, 그 때 어떤 방식을 사용할지는 개발자에게 달려있습니다.
styled-components가 정답은 아니며, CSS, SCSS, Tailwind 등 여러가지 방법을 사용해서 스타일을 입혀보면서 장단점을 파악하시면 더 도움이 되실것 같습니다.
감사합니다.
강의가 삭제되었다고 합니다
0
133
1
이거 왜 존재하지 않는다고 뜨는건가요
0
149
1
존재하지 않는 수업이라고 떠요
0
194
1
안드로이드 에뮬레이터 오류
0
113
1
교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.
0
143
1
prevIsConfiromed 질문
1
154
2
chapter14 잘이해가 되지않습니다..
1
150
2
2025년 3월 리액트버전
1
217
2
npm 설치 오류
1
197
1
chapter_07 콘솔로그 질문드려요~!
1
139
2
안녕하세요 미니블로그 실습 질문드립니다.
1
192
3
에러가 떠요
1
231
3
Chapter6 질문 드립니다
1
221
2
실습 코드 있을까요?
1
219
2
상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.
1
247
2
npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다
0
321
3
이름과 코멘트 줄바꿈이 안 됩니다.
0
150
1
버튼이 안 뜹니다
0
313
2
npx create-react-app my-app
1
478
2
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
1
388
3
Chapter_05 터미널, 리액트 에러
0
201
2
npx create-react-app my-app 명령어 반응없음
1
439
3
import 코드 에러
1
217
1
백틱
1
126
1