styled-components 사용하기

1. 기본적인 사용법 알아보기

import React from "react";
import styled from "styled-components"; //styled-components에서 styled 라는 키워드를 import 한다.

const StBox = styled.div` //styled 키워드를 사용해서 styled-components 방식대로 컴포넌트를 만든다.
width: 100px;
height: 100px;
border: 1PX solid red;
margin: 20px;
`; //백틱 안에 스타일 코드를 작성한다. 기존 알던 css와 동일

const App = () => {
  return <StBox>박스</StBox>; //그리고 styled-components를 JSX에서 html 태그를 사용하듯이 사용한다.
};

export default App;

결과로 아래와 같이 나와야 한다.

처음에 브라우저에서 네모 박스가 안 보였는데 소문자 <stBox>로 작성된 부분을 대문자 <StBox>로 바꾸니까 해결됐다.

컴포넌트 네이밍 만들 시 주의사항

함수형 컴포넌트는 반드시 대문자로 시작해야 한다.
대문자로 작성하지 않을 경우, 해당 컴포넌트는 정상 작동하지 않는다.

2. 조건부 스타일링 구현하기

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

// 1. styled-components를 만든다.
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1PX solid ${(props) => props.borderColor}; // 4. 부모 컴포넌트에서 보낸 props를 받아 사용한다.(박스 모양은 동일하니까 테두리만 변경)
margin: 20px;
`;

const App = () => {
  return (
    <div>
      {/* 2. 위에서 만든 styled-components를 사용한다.*/}
      {/* 3. 그리고 props를 통해 borderColor라는 값을 전달한다.*/}
    <StBox borderColor="red">빨간 박스</StBox>
    <StBox borderColor="green">초록 박스</StBox>
    <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

export default App;

결과로 아래와 같이 나온다.

세로가 아닌 가로로 만들기 위해서는 어떻게 해야 할까?
아래의 코드를 추가해 주면 된다.

const Stwrap = styled.div`
display: flex;
`;

그리고 <StBox>를 감싸고 있는 <div>를 <Stwrap>으로 변경하면 가로로 나타난다.

[최종코드]

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

// 1. styled-components를 만든다.
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1PX solid ${(props) => props.borderColor}; // 4. 부모 컴포넌트에서 보낸 props를 받아 사용한다.(박스 모양은 동일하니까 테두리만 변경)
margin: 20px;
`;

const Stwrap = styled.div`
display: flex;
`; //이 코드 없으면 네모 박스가 세로로 나옴 가로로 만들기 위한 코드임!

const App = () => {
  return (
    <Stwrap>
      {/* 2. 위에서 만든 styled-components를 사용한다.*/}
      {/* 3. 그리고 props를 통해 borderColor라는 값을 전달한다.*/}
    <StBox borderColor="red">빨간 박스</StBox>
    <StBox borderColor="green">초록 박스</StBox>
    <StBox borderColor="blue">파랑 박스</StBox>
    </Stwrap>
  );
};

 export default App;