React[Component Styling] - Styled Components

일상 코딩·2022년 6월 2일
0

React

목록 보기
31/45
post-custom-banner

01.Styled Component란?

  • Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리 입니다.

02.프로젝트 생성 & 설치

$ npx create-react-app styled-components-example
$ cd styled-components-example
$ npm install styled-components
$ code .

03.기본 사용 예제

StyledButton.jsx 파일 생성

  • src폴더안에 componetns 폴더 생성
  • componetns 폴더안에 StyledButton.jsx 파일 생성

StyledButton.jsx

import styled from "styled-components"

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
`

export default StyledButton;

App.js

import logo from "./logo.svg"
import "./App.css"
import StyledButton from "./components/StyledButton"

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledButton>버튼</StyledButton>
        </p>
      </header>
    </div>
  )
}

export default App

실행 결과

  • npm start
  • http://localhost:3000

04.props 사용 예제

StyledButton.jsx

import styled, { css } from "styled-components"

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;

  ${props => 
    props.primary && 
    css`
    background: palevioletred;
    color: white; 
  `}
`

export default StyledButton;
  • 해당 스타일 컴포넌트에 primary로 props가 전달되면 배경색은 연보라색 글자 색상은 흰색으로 스타일을 지정 해줍니다.

App.js

import logo from "./logo.svg"
import "./App.css"
import StyledButton from "./components/StyledButton"

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledButton>버튼</StyledButton>
          <StyledButton primary>버튼</StyledButton>
        </p>
      </header>
    </div>
  )
}

export default App
  • 두번째 StyleButton 컴포넌트에만 props를 전달함

실행 결과

  • 두번째 StyleButton 컴포넌트에만 props를 전달해서 두번째 StyledButton 컴포넌트만 배경색이 연보라색 그리고 글자 색상이 흰색으로 나타나고 있습니다.

05.스타일 컴포넌트 확장

StyledButton.jsx

import styled, { css } from "styled-components"

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;

export default StyledButton;

App.js

import logo from "./logo.svg"
import "./App.css"
import StyledButton from "./components/StyledButton"
import styled from "styled-components"

const PrimaryStyledButton = styled(StyledButton)`
  background: palevioletred;
  color: white;
`

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledButton>버튼</StyledButton>
          <PrimaryStyledButton>버튼</PrimaryStyledButton>
        </p>
      </header>
    </div>
  )
}

export default App
  • PrimaryStyledButton 스타일 컴포넌트는 StyledButton 스타일 컴포넌트의 스타일 속성들을 상속받아 배경색을 연보라색 글자 색상은 흰색으로 확장했습니다.

실행 결과

06.스타일 컴포넌트를 다른 태그 또는 다른 컴포넌트처럼 사용

  • 스타일 컴포넌트에 as 속성을 사용하면 마치 다른 태그 또는 다른 컴포넌트처럼 사용할 수 있습니다.

태그

App.js

import logo from "./logo.svg"
import "./App.css"
import StyledButton from "./components/StyledButton"

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledButton as="a" href="/">  //a태그로 바꾸고 href 경로로 이동
            버튼
          </StyledButton>
        </p>
      </header>
    </div>
  )
}

export default App
  • 이처럼 스타일 컴포넌트에 as속성을 지정해주면 원하는 태그의 스타일로 바꿔줄 수 있습니다.

StyledButton.jsx

import styled, { css } from "styled-components"

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;

  ${props => 
    props.primary && 
    css`
    background: palevioletred;
    color: white; 
  `}
`

export default StyledButton;

실행 결과

컴포넌트

App.js

import logo from "./logo.svg"
import "./App.css"
import StyledButton from "./components/StyledButton"

const UppercaseButton = (props) => (
  <button {...props} children={props.children.toUpperCase()} />
)

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledButton as={UppercaseButton}>button</StyledButton>
        </p>
      </header>
    </div>
  )
}

export default App
  • 이처럼 스타일 컴포넌트에 as속성을 지정해서 원하는 컴포넌트의 스타일을 적용시켜 줄 수 있다.

StyledButton.jsx

import styled, { css } from "styled-components"

const StyledButton = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;

  ${props => 
    props.primary && 
    css`
    background: palevioletred;
    color: white; 
  `}
`

export default StyledButton;

실행 결과

07.스타일 컴포넌트 ClassName

  • React에서는 class를 사용하지 않고 대신 JSX 문법으로 className을 사용합니다.

App.js

import logo from "./logo.svg"
import "./App.css"
import styled from "styled-components"
import "./App.css"

const StyledMyButton = styled.button``

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledMyButton>button1</StyledMyButton>
          <StyledMyButton className="btn">button2</StyledMyButton>
        </p>
      </header>
    </div>
  )
}

export default App

App.css

.btn {
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 40px;
}

실행 결과

  • button1: 버튼 스타일 컴포넌트
  • button2: 버튼 스타일 컴포넌트에 className으로 스타일 지정을 해줌

08.props값을 받아 컴포넌트 스타일을 유동적으로 조절

App.js

import logo from "./logo.svg"
import "./App.css"
import styled from "styled-components"
import "./App.css"

const StyledMyButton = styled.button`
  border: 2px solid ${(props) => props.color || "palevioletred"};
  color: ${(props) => props.color || "palevioletred"};
`

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledMyButton className="btn">button1</StyledMyButton>
          <StyledMyButton className="btn" color="green">
            button2
          </StyledMyButton>
        </p>
      </header>
    </div>
  )
}

export default App
  • 첫번째 StyledMyButton 컴포넌트에는 color props를 사용하지 않음
  • 두번째 StyledMyButton 컴포넌트에는 color props를 사용함
  • StyledMyButton 컴포넌트에 color 속성이 전달되면 테두리와 글자 색상에 해당되는 props.color 스타일을 적용하고 아니면 연보라 색상의 스타일을 적용함

App.css

.btn {
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;
}

실행 결과

  • 첫번째 StyledMyButton 컴포넌트는 color props 속성이 없으므로 className으로 지정된 btn스타일만 적용됨
  • 첫번째 StyledMyButton 컴포넌트는 color props 속성이 있으므로 className으로 지정된 btn스타일과 같이 props.color 스타일이 적용됨

09.스타일 컴포넌트에서 가상 선택자 사용

App.js

import logo from "./logo.svg"
import "./App.css"
import styled from "styled-components"

const StyledMyButton = styled.div`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;

  :hover {
    border: 2px solid green;
    color: green;
  }

  ::before {
    content: "@";
  }
`

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledMyButton>button</StyledMyButton>
        </p>
      </header>
    </div>
  )
}

export default App

실행 결과

  • hover 전
  • hover 후

10.스타일 컴포넌트 전역스타일 설정

App.js

import logo from "./logo.svg"
import "./App.css"
import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
.Global {
  color: yellow;
}
`

function App() {
  return (
    <div className="App">
      <GlobalStyle />
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div className="Global">Global Test1</div>
        <div>Test</div>
        <div className="Global">Global Test2</div>
      </header>
    </div>
  )
}

export default App
  • createGlobalStyle를 import 해준다.
  • GlobalStyle를 생성한뒤 코드 안쪽에는 적용시킬 스타일 css를 입력해준다.
  • GlobalStyle 컴포넌트는 최상위 컴포넌트에 적어주면 적용이 된다.

실행 결과

11.스타일 컴포넌트 attrs 사용

StyledA.jsx

import styled from "styled-components"

const StyledA = styled.a.attrs(props => ({
  target: "_BLANK",
}))`
  color: ${props => props.color};
`

export default StyledA
  • a태그로 스타일 컴포넌트 생성
  • a태그로 이동시 새창으로 띄우고 싶은 경우 attrs에서 target: "_BLANK"로 설정

App.js

import logo from "./logo.svg"
import "./App.css"
import StyledA from "./components/StyledA"

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledA href="http://google.com">태그</StyledA>
        </p>
      </header>
    </div>
  )
}

export default App

실행 결과

  • 태그 클릭시 google 페이지로 새창 띄워서 이동
profile
일상 코딩
일취월장(日就月將) - 「날마다 달마다 성장하고 발전한다.」
이전 포스트

React[Component Styling] - CSS module & SASS module

다음 포스트

React - Image file 업로드

post-custom-banner

0개의 댓글