styled components 심화편

목차

styled components 심화편

React의 styled components 심화 편이다.

설치와 기본적 사용은 이 글을 참고하자.

styled component

 

//App.js
import React from "react";
import styled from 'styled-components';

function App() {
  return (
    <>
      <D_styled></D_styled>
      <D_styled></D_styled>
    </>
  );
}

const D_styled = styled.div`
  display: inline-block;
  width:100px;
  height:100px;
  margin: 10px;

  background: #e4fbff;
`;

export default App;

 

기본적인 스타일링 태그 2개를 만들었다.

여기서 배경색 코드를 좀 달리 해보자.

단일 스타일링

//App.js
import React from "react";
import styled from 'styled-components';

function App() {
  return (
    <>
      <D_styled></D_styled>
      <D_styled></D_styled>
    </>
  );
}

const D_styled = styled.div`
  display: inline-block;
  width:100px;
  height:100px;
  margin: 10px;

  background: ${(props) => props.bgPurple || "#e4fbff"};
  // porps.bgPurple 의 값이 없으면 background 값을 "#e4fbff"로 지정
`;

export default App;

배경색에 분기문 or(||)을 걸었고,

앞의 조건이 거짓이면 뒤의 값이 참,

앞의 조건이 참이면 뒤의 값이 거짓이 된다.

D_styled 두 개 모두 props.bgPurple가 값을 가지지 않았기에 거짓,

뒤의 값 #e4fbff 이 참으로 실현되었다.

//App.js
import React from "react";
import styled from 'styled-components';

function App() {
  return (
    <>
      <D_styled></D_styled>
      <D_styled bgPurple="#7868e6"></D_styled>
    </>
  );
}

const D_styled = styled.div`
  display: inline-block;
  width:100px;
  height:100px;
  margin: 10px;

  background: ${(props) => props.bgPurple || "#e4fbff"};
`;

export default App;

이번에는 두 번째 태그에

bgPurple 값을 지정해주었다.

그러니 해당 태그의 배경색은 지정 값으로 반영되었다.

복수 스타일링

//App.js
import React from "react";
import styled, { css } from 'styled-components';

function App() {
  return (
    <>
      <D_styled></D_styled>
      <D_styled styleMore></D_styled>
    </>
  );
}

const D_styled = styled.div`
  display: inline-block;
  width:100px;
  height:100px;
  margin: 10px;
  background: #e4fbff;

  ${(props) =>
    props.styleMore && css`
      width:300px;
      height:300px;
      background: #7868e6;
      border-radius: 20px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  `}
`;

export default App;

으음.. 뭐 익숙하지 않을 뿐

보면 그렇게 어렵지는 않다.

styleMore이 참이면 &&(and) 뒤에껄 실행시킨다는 뜻이다.

끝