[React] Styled Component

Styled Component

: 테마나 props를 사용해 스타일을 간편하게 관리할 수 있게 하는 라이브러리

---

설치

npm install --save styled-components

위 명령어를 터미널에 입력하여 최신 버전으로 설치합니다.

---

사용법

// JSX
import styled from "styled-components";

const Title = styled.h1`
    font-size: 1.5em;
    color: black;
    text-align: center;
`;

function MainPage(props){
    return(
        <Title>
            안녕, 리액트!
        </Title>
    );
}

• styled를 import해줍니다.
• styled는 component를 반환하며 styled.태그명``; 형태로 사용합니다.

// JSX
const Title = styled.h1`
    font-size: 1.5em;
    color: ${props => props.color};
    text-align: center;
`;

function MainPage(props){
  	const { color, setColor } = useState('red');

    return(
        <Title color={color}>
            안녕, 리액트!
        </Title>
    );
}

• 백틱으로 감싼 영역은 ${}을 사용하여 변수의 사용이 가능합니다.
• props값을 받아와 사용하여 변수값에 따른 스타일링이 가능해집니다.

---

key를 props로 참조 불가

map()을 이용해 반복 출력중인 컴포넌트의 스타일링 중 변수로 key값을 사용하려고 시도시 문제 발생

component 작성 부분

// JSX
{specStates.map((specCard) => (
  <CardBack key={specCard.id}>
  </CardBack>
))}

styled 부분

// JSX
const CardBack = styled.div`
	background-image: url(/images/card${(props)=>props.key}.png);
`;

※ key를 props로 참조 불가

Feat. GPT

React 컴포넌트의 속성 (props)은 key라는 이름의 속성은 예약어로 사용되며, 해당 값은 컴포넌트에서 직접 참조할 수 없습니다. key는 React에서 컴포넌트를 고유하게 식별하는 데 사용되는 속성이지만, 컴포넌트 내부에서는 props로 직접 참조할 수 없습니다.

해결방안

props 추가

// JSX
{specStates.map((specCard) => (
  <CardBack
  	key={specCard.id}
    cardId={specCard.id}>
  </CardBack>
))}

추가한 props를 사용

// JSX
const CardBack = styled.div`
	background-image: url(/images/card${(props)=>props.cardId}.png);
`;

---

css 모듈

위 처럼 변수에 따라 스타일링 할 때에 지원하는 더 좋은 기능이 있다.

import styled, { css } from "styled-components";

~~~

const Title = styled.div`
  ${props => props.theme.landscapeMode && css`
    width: 15%;
    white-space: pre-wrap;
  `}
`

1. css를 import한 후
2. &&이나 ? : 문법에 css``를 사용하여 작성한다.

훨씬 깔끔하고 자동완성도 지원된다.