(TIL 39일차) 스타일 컴포넌트

Styled Component란

스타일 컴포넌트는 스타일이 포함된 리액트 컴포넌트를 만드는 것

• 장점
  • 당연히 css나 scss파일을 만들 필요가 없음.
  • className을 고민할 필요도 없고, 모든 것을 자바스크립트로 해결

스타일 컴포넌트 초기셋팅 참고사이트

설치

npm install --save styled-components

예시

import React from 'react';
import styled from 'styled-components';

// styled 다음엔 그냥 html 태그는 적으면 됩니다. 그리고 ``을 사용해서 css 코드를 그대로 적었습니다 따옴표가 아니가 백틱!!
const Wrapper = styled.div`
  height: 500px
  background-color: black;
  border-radius: 10px;
  color: black;
`

const App = () => (
  <Wrapper>첫번째 스타일 </Wrapper>
);

export default App;

응용

// Theme .js
const Theme = {
  successColor: "#27ae60",
  failColor:"#e74c3c"
}

export default Theme;

import React from 'react';
import styled from 'styled-components';
import Theme from './theme';

// APP.js

 const Wrapper = styled.div`
    height: 500px
    background-color: black;
    border-radius: 10px;
    color: ${Theme.successColor};
  `
const App = () => {
  return (
    <Wrapper>글자색이 변했습니다.</Wrapper>
  );
};

export default App;

주의사항

import React from 'react';
import styled from 'styled-components';
import Theme from './theme';

const App = () => {
  const Wrapper = styled.div`
    height: 500px
    background-color: black;
    border-radius: 10px;
    color: ${Theme.successColor};
  `
  return (
    <Wrapper>글자색이 변했습니다.</Wrapper>
  );
};

export default App;

• 컴포넌트 내부에서 스타일 컴포넌트를 만들지 말 것!
• 이럴 경우 매우 느리고 별로라고 설명 문서에 적혀있습니다.

• https://justmakeyourself.tistory.com/entry/react-styled-components 참고 사이트