[React] 스타일링된 엘리먼트 만들기&스타일에서 props 조회하기

① 스타일링된 엘리먼트 만들기

styled-components를 사용해 스타일링된 엘리먼트를 만들 때는 컴포넌트 파일의 상단에서 styled를 불러오고, styled.태그명을 사용해 구현한다.

• 예시 코드

import styled from 'styled-components';
 
const MyComponent = styled.div`
  font-size: 2rem;
`;

styled.div 뒤에 Tagged 템플릿 리터럴 문법을 통해 스타일을 넣어 주면, 해당 스타일이 적용된 div로 이루어진 리액트 컴포넌트가 생성된다.

그래서 나중에 아래와 같은 형태로 사용할 수 있다.

<MyComponent>Hello</MyComponent>

1) div가 아닌 button이나 input에 스타일링을 하고 싶다면?
styled.button 혹은 styled.input 같은 형태로 뒤에 태그명을 넣어 주면 된다.

2) 하지만 사용해야 할 태그명이 유동적이거나 특정 컴포넌트 자체에 스타일링해 주고 싶다면?

아래와 같은 코드로 구현할 수 있다.

// 태그의 타입을 styled 함수의 인자로 전달
const MyInput = styled('input')`
  background: gray;
`
// 아예 컴포넌트 형식의 값을 넣어 줌
const StyledLink = styled(Link)`
  color: blue;
`

② 스타일에서 props 조회하기

styled-components를 사용하면 스타일 쪽에서 컴포넌트에게 전달된 props 값을 참조할 수 있다.

• 이전에 작성했던 Box 컴포넌트

  // StyledComponents.js - Box 컴포넌트
  const Box = styled.div`
   /* props로 넣어 준 값을 직접 전달해 줄 수 있습니다. */
   background: ${props => props.color || 'blue'};
   padding: 1rem;
   display: flex;
  `;

코드를 보면 background 값에 props를 조회해 props.color의 값을 사용하게 했고, color 값이 주어지지 않았을 때는 blue를 기본 색상으로 설정해두었다.

이렇게 만들어진 코드는 JSX에서 사용될 때 다음과 같이 color 값을 props로 넣어 줄 수 있다.

<Box color="black">(...)</Box>