[React] CDD 개발 도구 Styled Components Props 활용

🔖 Props 활용하기

Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있다.  내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능하다.

1) Props로 조건부 렌더링하기

//삼항연산자를 활용해 <Button> 컴포넌트에 skyblue 라는 props가 있는지 확인하고, 
//있으면 배경색으로 skyblue를, 없을 경우 white를 지정해주는 코드.

const Button = styled.button`
	background: ${ (props) => props.skyblue? "skyblue" : "white"}
`;

import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";
//받아온 prop에 따라 조건부 렌더링이 가능합니다.
const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 skyblue>Button1</Button1>
    </>
  );
}

2) Props 값으로 렌더링하기

// 1. props의 값을 통째로 활용해서 컴포넌트 렌더링에 활용할 수 있다.

const Button = styled.button`
	background: ${(props) => props.color? porps.color : "white"}
`;

// 2. props.color 가 없다면 white를, 
//props.color 가 있다면 props.color의 값을 그대로 가져와서 스타일 속성 값으로 리턴

const Button = styled.button`
	background: ${(props) => porps.color || "white"}
`;

import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";

//받아온 prop 값을 그대로 이용해 렌더링할 수도 있습니다
const Button1 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;
//다음과 같은 형식으로도 활용할 수 있습니다.
const Button2 = styled.button`
  background: ${(props) => props.color || "white"};
`;

export default function App() {
  return (
    <>
      <GlobalStyle />
      <Button1>Button1</Button1>
      <Button1 color="orange">Button1</Button1>
      <Button1 color="tomato">Button1</Button1>
      <br />
      <Button2>Button2</Button2>
      <Button2 color="pink">Button2</Button2>
      <Button2 color="turquoise">Button2</Button2>
    </>
  );
}

4. 전역 스타일 설정하기

1. 전역 스타일을 설정하기 위해 Styled Components에서 createGlobalStyle 함수를 불러온다.

import { createGlobalStyle } from "styled-components";

2. 함수를 사용해 CSS 파일에서 작성하듯 설정해주고 싶은 스타일을 작성한다.

const GlobalStyle = createGlobalStyle`
	button {
	padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`

3. <GlobalStyle> 컴포넌트를 최상위 컴포넌트에서 사용해주면 전역에 <GlobalStyle> 컴포넌트의 스타일이 적용된다.

function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}