Styled Components

컴포넌트 꾸미기!!

➡️ JS 코드로 CSS코드 만들기

➡️ props를 통해서 부모 컴포넌트에서 자식 컴포넌트에게 데이터 넘겨주기 : 조건부 스타일링 가능

 

---

확장앱 깔기

vscode-styled-components

 

터미널에 패키지 설치 (yarn)

yarn add styled-components

 

---

styled-components 사용하기

• import 해주기

import styled from "styled-components";

• 코드

import styled from "styled-components";

// 이렇게 만들어진 컴포넌트는
// 점 뒤에는 html 요소가 들어와야한다.
const StBox = styled.div`   
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

// 실제 태그처럼 쓸 수 있다.
function App() {
  return <StBox>박스</StBox>;
}

export default App;

• 결과

 

---

Props 사용하기 ( 화살표 함수 )

import "./App.css";
import styled from "styled-components";

const StBox = styled.div`
  width: 100px;
  height: 100px;     /* 자식 컴포넌트 */
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

function App() {
  return (
    <>   // borderColor >> 부모 컴포넌트
      <StBox borderColor="red">빨간박스</StBox>
      <StBox borderColor="blue">파란박스</StBox>
      <StBox borderColor="green">초록박스</StBox>
    </>
  );
}

export default App;

 

• 결과 

 

---

style-components로 간편하게 css를 줄 수 있어서 코드가 더 보기 편해진 것 같다.

거기에 props도 사용가능해서 조금 헷갈리지만 알고 있으면 도움이 많이 될 것 같다.

props를 이용해서 사용하는 것을 연습해야겠다.