[React 숙련] Css-in-JS (styled-components) 조건부 스타일링 가능

1.Css-in-JS ▶ 자바스크립트로 css코드를 작성하는 방식 2.Styled Components * 패키지 : 리액트는 없지만, 추가로 외부에서 가져와서 사용하는 외부 라이브러리 (3rd party => npm에 모여있음) (1) VS 코드에서 plug-in 설치필요 ( vscode-styled-components ) (2) 터미널에서 (yarn create react-app CRA 실행 후 (3) 터미널에서 yarn add styled-components 실행 (마켓에서 해당 패키지 가져옴)(4) 파일 package.json에서 확인 가능 import './App.css'; import styled from 'styled-components'; function App() { const StBox ..

• format_list_bulleted React
• · 2023. 11. 7.
• textsms

[React 입문] Styling + 반복되는 구간 컴포넌트 처리

// rfce import React, { useState } from 'react'; import Layout from 'Layout'; const divStyle = { display: 'flex', justifyContent: 'center', alignItems: 'center', borderRadius: '10px', border: '1px solid green', width: '100px', height: '100px', }; function App() { return ( 감자 고구마 오이 가지 옥수수 ); } export default App; * Style을 객체로 넣고 자바스크립트로 표현하는 거라 {{}} 이렇게 표현함. * html의 class를 사용할때는 JSX에서는 className..

• format_list_bulleted React
• · 2023. 11. 2.
• textsms