리액트14 [react] styled components에서 style확장(재사용)하기 style 재사용 styled-components로 생성한 컴포넌트는 일반 React 컴포넌트처럼 상속이 가능합니다. 중복된 스타일을 가지거나 특정 스타일을 확장하고 싶을 때 컴포넌트를 확장하여 사용할 수 있습니다. Button을 만들고 GreenButton과 BlueButton에서 Button을 확장하여 각각 스타일을 적용해 보겠습니다. import React from "react"; import styled from "styled-components"; const App = () => ( 버튼 초록버튼 파란버튼 ); const Container = styled.div` display: flex; `; const Button = styled.button` outline: none; border: non.. 2019. 7. 30. [react] 스타일드 컴포넌트(styled components) 1. Styled-components? styled-components는 react와 react-native에서 스타일을 적용하는 데 사용되는 라이브러리입니다. styled-components 없이 전통적인 CSS 방식(css 혹은 scss 임포트)으로 애플리케이션에 스타일을 적용하면 코드의 일관성을 유지하기 어렵고, 의존성과 글로벌 네임스페이스의 관리가 복잡해집니다. styled-components는 이러한 문제를 해결하기 위해 등장했으며 컴포넌트 단위로 스타일을 캡슐화하여 모듈화 및 재사용성을 높여줍니다. 2. 전통 CSS와 다른 점 2-1. CSS-in-JS styled-component는 CSS-in-JS 방식으로 작동합니다. CSS-in-JS는 CSS를 JavaScript 파일 내에 작성하는 패.. 2019. 7. 30. 이전 1 2 다음
