-
[react] styled-componentsreact+vue 2022. 9. 23. 14:36
기존 스타일 적용 방법
function App() { const a = { backgroundColor: "red" }; return ( <div style={ a}>안녕</div> ); }
- 단점 : 자동완성이 안된다.
- 주의 사항: style을 만들때는 함수안에 만들지 말것. 정적 코드이기 때문에 UI가 reload될 때마다 읽어지는 것을 방지한다.
css파일 만들기
src폴더 우클릭→새파일→<파일이름>.css
- App.css
.box-style{ background-color: pink; }
- App.js
import './App.css'; function App() { const a = { backgroundColor: "red" }; return ( <div> <div style={a}>안녕</div> <div className = "box-style">css파일로 적용</div> </div> ); } export default App;
styled-components
- 다운로드
npm install --save styled-components
package.json의 dependencies에 추가되었다.
확장프로그램에서 vscode-styled-components를 설치해준다(자동완성 기능)
const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `;
styled-components 홈페이지에 있는 예제
자바스크립트로 다시 쓰면
const t = document.createElement("h1"); t.style = { fontSize: "1.5em", textAlign: "center", color: "palevioletred" };
styled-components를 사용하는 것이 훨씬 편하다 자동완성도 되고, 문자열 형식을 지키지 않아도 된다.
import './App.css'; import styled from 'styled-components'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; function App() { const a = { backgroundColor: "red" }; return ( <div> <div style={a}>안녕</div> <div className="box-style">css파일로 적용</div> <Title>styled-components 적용</Title> </div> ); } export default App;
적용할때는 <Title>내용</Title>으로 적용한다.
장점은 css파일 없이 하나의 javascript파일로 관리할 수 있고 자동완성을 지원한다. 추가로 css문법과 유사하다.
단점은 css파일을 재사용할 수 없다.
styled-components로 header파일 만들기
src폴더에 header.js라는 파일을 만들어준다.
- header.js
import styled from 'styled-components'; const HeaderStyle= styled.div` background-color: blue; font-size: 2rem; margin: 0 auto; `; function Header() { return ( <HeaderStyle>헤더입니다.</HeaderStyle> ); } export default Header;
default로 Header함수를 export시켜준다.
- App.js
import './App.css'; import styled from 'styled-components'; import Header from './header'; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; function App() { const a = { backgroundColor: "red" }; return ( <div> <Header/> <div style={a}>안녕</div> <div className="box-style">css파일로 적용</div> <Title>styled-components 적용</Title> </div> ); } export default App;
header.js의 Header를 import한다.
App()에 <Header/>를 반환시킨다.
상단에 헤더가 노출된다.
'react+vue' 카테고리의 다른 글
[react] props (1) (0) 2022.09.23 [react] useEffect가 두 번 실행되는 현상 (0) 2022.09.23 [react] useRef (0) 2022.09.22 [react] useMemo (0) 2022.09.22 [react] Too many re-renders. React limits the number of renders to prevent an infinite loop. (0) 2022.09.22