컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언 하는 방식이다. 이 방식을 'CSS-in-JS' 라고 한다. 이와 관련된 라이브러리는 굉장히 많지만,
그 중 개발자들이 가장 선호하는 styled-component 에 대해서 알아보자.
Tagged 템플릿 리터럴
styled-component 를 작성한 코드를 살펴보면, ` 을 사용하여 만든 문자열에 스탕리 정보를 넣어 주었다. 여기서 사용한 문법을 Tagged 템플릿 리터럴이라고 부른다. 템플릿 안에 자바스크립트 객체나 함수를 전달할 때 온전히 추출할 수 있다는 것이다.
스타일링 된 엘리먼트 만들기
styled-components 를 사용하여 스타일링된 엘리먼트를 만들 때는 컴포넌트 파일의 상단에서 styled 를 불러오고, styled.태그명을 사용하여 구현한다.
import styled from 'styled-components';
const MyComponent = styled.div `
font-size: 2rem;
`;
이렇게 styled.div 뒤에 Tagged 템플릿 리터럴 문법을 통해 스타일을 넣어 주면, 해당 스타일이 적용된 div로 이루어진 리액트 컴포넌트가 생성된다 그래서 나중에
<MyComponent>Hello</MyComponent> 와 같은 형태로 사용할 수 있다. div 가 아닌 button 이나 input 에 스타일링 하고 싶다면 styled.button or styled.input 와 같은 형태로 뒤에 태그명을 넣어 주면 된다.
// 태그 타입을 styled 함수의 인자로 전달
const MyInput = styled(`input`)`
backgroud: gray;
`
// 아예 컴포넌트 형식의 값을 넣어 준다.
const StyledLink = styled(Link) `
color: blue;
`여기서 사용되는 Link 컴포넌트는 나중에 리액트 라우터를 배울 때 사용할 컴포넌트이다. 이런 식으로 *컴포넌트를 styled 의 파라미터에 넣는 경우에는 해당 컴포넌트에 className props 를 최상위 DOM 의 className 값으로 설정하는 작업이 내부적으로 되어 있어야 한다.
const Sample = ({ className }) => {
return <div className={className}> Sample </div>;
};
const StyledSample = styled(Sample)`
font-size: 2rem;
`;스타일에서 props 조회하기
styled-components를 사용하여 스타일 쪽에서 컴포넌트에게 전달된 props값을 참조할 수 있다.
- StyledComponents.js - Box 컴포넌트
const Box = styled.div `
//props 로 넣어 준 값을 직접 전달해 줄 수 있다.
background: ${props => props.color || 'blue'};
padding: 1rem;
displat: flex;
`;이 코드를 보면 backgo
