Styled Components - 3

• Props 활용하기
  Styled Components는 템플릿 리터럴 문법( ${ } )을 사용하여 JavaScript 코드를 사용할 수 있다. props를 받아오려면 props를 인자로 받는 함수를 만들어 사용

1. props 받아오는 첫번째 방법

import 전역_컴포넌트 from "./I_HAVE_CSS.js";
//받아온 prop에 따라 조건부 렌더링이 가능합니다.
const 버튼1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

export default function App() {
  return (
    <>
      <전역_컴포넌트 />     //<-필수!!
      <버튼1> props가_없는_컴포넌트 </버튼1>
      <버튼1 skyblue> props가_있는_컴포넌트 </버튼1>
    </>
  );
}

2. props 받아오는 두번째 방법

import 전역_컴포넌트 from "./I_HAVE_CSS.js";
//받아온 prop 값을 그대로 이용해 렌더링할 수도 있습니다
const 버튼1 = styled.button`
  background: ${(props) => (props.color ? props.color : "white")};
`;
//다음과 같은 형식으로도 활용할 수 있습니다.
const 버튼2 = styled.button`
  background: ${(props) => props.color || "white"};
`;

export default function App() {
  return (
    <>
      <전역_컴포넌트 />
      <버튼1> 호잇 </버튼1>
      <버튼1 color="orange"> 호잇 </버튼1>
      <버튼1 color="tomato"> 호오잇 </버튼1>
      <br />
      <버튼2> 하이 </버튼2>
      <버튼2 color="pink"> 헬로우 </버튼2>
      <버튼2 color="turquoise"> 안녕 </버튼2>
    </>
  );
}

참고한 링크 : https://chaeyoung2.tistory.com/47