반응형 리액트 (React)/React CSS, SCSS, Styled Components3 React Styled-components Styled-componets 란? - class 이름 짓기에서 해방 - 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적 - CSS-in-JS 라이브러리 중 하나 - 컴포넌트에 스타일을 직접 입히는 방식이라고 생각해도 됨. - 문법은 css오 ㅏ 같다. Styled-components 설치 yarn add styled-components Styled-components 적용 import React from 'react'; // 패키지에서 styled를 불러온다. import styled from 'styled-components'; function App() { return ( hello React! ); } // scss처럼 자기 자신을 지칭할 때 &를 쓸 수 있다. const MyStyled = s.. 2021. 8. 31. SCSS 사용하기 SCSS란? - SCSS는 SASS의 3번째 버전에서 추가됨. - SASS의 모든 기능을 쓸 수 있고 CSS와 호환도 잘 되는 버전. SCSS 사용법 yarn add node-sass@4.14.1 open-color sass-loader classnames - 새로운 패키지를 설치하였다면, 리액트를 다시 시작해주자. SCSS 문법 Nesting - div 아래에 p, img 태그 스타일을 줄 때, 각각 다른 블럭을 만들어 쓸 필요가 없다. - 축약형으로 묶을 수 있다. → xxx-yyy 식일 때, 앞에 xxx가 같은 친구끼리 묶어 쓸 수 있다. //scss div { p { color: #888888; font: { family:sans-serif; size: 14px; } } img { width: 4.. 2021. 8. 31. Component에 CSS 파일 적용하기 Component에 CSS 파일 적용하기 App.js import React from 'react'; import logo from './logo.svg'; import BucketList from './BucketList'; import './style.css'; class App extends React.Component { constructor(props){ super(props); this.state = { list: ['영화관 가기', '매일 책읽기', '수영 배우기'], }; } render() { console.log(this.state); return ( 내 버킷리스트 {/* 컴포넌트를 넣어줌. */} {/* */} ); } } export default App; - css 파일을 impo.. 2021. 8. 31. 이전 1 다음 반응형
