TIL.231107 React숙련

▶️styled-components사용법

📌styled-components란 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지
📌패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램

sc의 기본적인 원리는 꾸미고자 하는 컴포넌트를 sc의 방식대로 먼저 만들고
그 안에 스타일 코드를 작성하는 방식

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

const StBox = styled.div`
//백틱 안의 css요소 코드 작성
`;
const App = () => {
  return <StBox>박스</StBox>;
};
export default App;

☑️ CSS-in-JS

📌CSS-in-JS란, 자바스크립트로 CSS코드를 작성하는 방식

1.CSS-in-JS 방식의 강점이 바로 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할 수 있다.
2.props를 통해서 부모 컴포넌트로부터 값을 전달받고, 조건문을 이용해서 조건부 스타일링을 할 수 있다.

• styled-component를 생성

const StBox = styled.div``;

• 생성한 styled-component를 부모 컴포넌트에서 사용

const App = () => {
  return (
    <div>
      <StBox>빨간 박스</StBox>
      <StBox>초록 박스</StBox>
      <StBox>파랑 박스</StBox>
    </div>
  );
};

• props로 자식컴포넌트로 전달

const App = () => {
  return (
    <div>
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

• props 부모컴 자식컴으로 내려주기

const StBox = styled.div`
  border: 1px solid ${(props) => props.borderColor};
`;

하루를 마치며

javascript → JSX → styled-components 까지 연달아 정신없이 정보가 들어와서인지
너무 복잡하다😭 보충이 살길이지만....... 12시간씩 강의에 과제에 til작성에 흐메 하루가 이렇게 짧았나...? 내 인생에서 이렇게 하루를 꽉 채워서 써보는건 처음인듯? 뭔가 뿌듯하다😋 하루하루가 짧고 버겁지만 열심히 복습복습!!!!!! 꼭 되고말거다 프론트엔드!!!!!!!!!!!!!!!!!!!!!!