[React] styled-components

3750 ワード
styled components React CSS テキストリンク
1.概念
JavaScriptファイルでCSS構文を使用できるライブラリ
既存のCSS構文を使用する手順は、次のとおりです.
-CSS構造を個別に宣言および実装する形で行う.
-CSSファイルに別々のCSSロジックを実装し、使用をインポートする形で行う(react)
//CSS구조 및 파일에 대한 별도 선언
<div className="head">{
  margin : 10px;
  padding : 15px;
}</div>

//선언한 CSS구조를 App.js rendering logic에서 활용
<div className="head">{logic}</div>
styled-componentは、CSSを組み合わせて、これらのファイルを管理する手間を省き、より高い読み取り可能な構文を提供するライブラリです.
Reactで使用されるコンポーネントベースのプログラミングは、1つのコンポーネントで関数を実装するように、CSS構文を利用してCSSを実装することができる.
2.コード例
styled-conents library拡張CSSを提供
Reactのコンポーネント自体がネーミングと宣言の内部関数からカスタマイズできるように.
styled-componentは、コンポーネントの名前と使用も自由にできます.
import styled from 'styled-components';


const Component = styled.div`
  color : white;
`

function App extends Component {
  render(){
  
  return (
    <Component title = "this is styled"/>
  )
  }
}
Styled Componentを使用してCSSを実現する観点から、
  • import styled from「styled-conents」は、styledインスタンスを受け入れて使用します.
  • は、別個のCSSロジックインプリメンテーションを必要とするが、コンポーネント化して使用することができるので、重複するUIレンダリングロジックを容易にインプリメントすることができる.
  • 独立したアプリケーション.cssファイルのcss実装はなく、内部でコンポーネント化してCSSを実装することができます.
  • styled.ある属性のtag,`(backtic)をdivで使用した後、簡単なCSSと再利用可能なコンポーネント(※template literal)を論理で実現します.
    • 3.参照リンク
    styled-component概念
    https://velog.io/@johnque/styled-components
    styled-componentの例
    https://wonit.tistory.com/298?category=810583
    Androidの4大コンポーネントのサービス
    Java JDBC