[react] styled-components

기존 스타일 적용 방법

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/>를 반환시킨다.

상단에 헤더가 노출된다.