반응형
📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.
- CSS 문법을 그대로 사용하면서 결과물을 스타일링 된 컴포넌트 형태로 만들어 주는 오픈소스 라이브러리다.
- 컴포넌트 개념을 사용하므로 리액트와 궁합이 잘 맞다.
- 다음 명령어를 통해 설치한다.
npm install --save styled-components
기본적인 사용법
- Styled-Components는 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정한다.
- 여기서 템플릿 리터럴은 자바스크립트에서 제공하는 문법 중 하나이고, 리터럴은 소스 코드의 고정된 값을 의미한다.
- 템플릿 리터럴은 백틱을 사용하여 문자열을 작성하고 그 안에 대체 가능한 expression을 넣는 방법이다.
- 다음은 태그드 템플릿 리터럴을 사용한 예제이다.
const name = '이름';
const region = '경기도';
function myTagFunction(strings, nameExp, regionExp) {
let str0 = strings[0];
let str1 = strings[1];
let str2 = strings[2];
return `${str0}${nameExp}${str1}${regionExp}${str2}`;
}
const output = myTagFunction`제 이름은 ${name}이고, 사는 곳은 ${region}입니다.`
// 출력 결과 : 제 이름은 이름이고, 사는 곳은 경기도입니다.
console.log(output)- Styled-Components는 태그드 템플릿 리터럴을 사용하여 CSS 속성이 적용된 리액트 컴포넌트를 만들어 준다.
- 기본적으로 아래와 같이 백틱으로 둘러싸인 문자열에 CSS 속성을 넣고 태그 함수 위치에는 styled.<HTML 태그> 형태로 사용한다.
import React from "react";
import styled from 'styled-components'
const Wrapper = styled.div`
padding: 1em;
background: grey;
`;
props 사용하기
const Button = styled.button`
color: ${props => props.dark ? "white" : "dark"};
background: ${props => props.dark ? "black" : "white"};
border: 1px solid black;
`;
function Sample(props) {
return (
<div>
<Button>Normal</Button>
<Button dark>Dark</Button>
</div>
)
}
export default Sample;- <Button dark>Dark</Button>에서 props로 dark를 넣어 주는 것을 볼 수 있다.
- 이렇게 들어간 props는 그대로 styled-components로 전달된다.
Styled-Components 스타일 확장
const Button = styled.button`
color: ${props => props.dark ? "white" : "dark"};
background: ${props => props.dark ? "black" : "white"};
border: 1px solid black;
`;
const RoundButton = styled(Button)`
border-radius: 16px;
`;
function Sample(props) {
return (
<div>
<Button>Normal</Button>
<Button dark>Dark</Button>
<RoundButton>Rounded</RoundButton>
</div>
)
}
export default Sample;- Styled-Components를 사용하면 리액트 컴포넌트가 생성되는데, 이렇게 생성된 컴포넌트를 기반으로 상기 코드와 같이 추가적인 스타일을 적용할 수 있다.
- 다음 부분이 스타일을 확장하는 핵심 코드다.
const RoundButton = styled(Button)`
border-radius: 16px;
`;
실습 - Styled-Components
// Blocks.jsx
const Wrapper = styled.div`
padding : 1rem;
display : flex;
flex-direction : row;
align-items : flex-start;
justify-content : flex-start;
background-color : lightgrey;
`;
const Block = styled.div`
padding : ${(props) => props.padding};
border : 1px solid black;
border-radius : 1rem;
background-color : ${(props) => props.backgroundColor};
color : white;
font-size : 2rem;
font-weight : bold;
text-align : center;
`;
const blockItems = [
{
label: "1",
padding: "1rem",
backgroundColor: "red",
},
{
label: "2",
padding: "3rem",
backgroundColor: "green",
},
{
label: "3",
padding: "2rem",
backgroundColor: "blue",
},
];
function Blocks(props) {
return (
<Wrapper>
{blockItems.map((blockItem) => {
return (
<Block
padding={blockItem.padding}
backgroundColor={blockItem.backgroundColor}
>
{blockItem.label}
</Block>
);
})}
</Wrapper>
);
}
export default Blocks;
// index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Blocks />
</React.StrictMode>
);
reportWebVitals();
마치며
창피한 일이지만 최근 업로드한 리액트 포스팅 내용들은 사실 대부분 까먹었다.
변명을 좀 하면 2024년 8월 25일에 책을 읽으면서 velog에 정리해놓은 내용들인데,
개인 프로젝트를 하더라도 아무래도 프론트단보다는 서버단에 신경을 쓰게 되다 보니깐
프론트단의 렌더링이라던가 구조 같은 부분들을 신경 쓰지 못했고, 책에서 배운 내용을 적용하기보다는 그저 서버단의 API를 요청할 수 있는 화면을 채우는 데 급급했다.
당장의 목적은 지금까지 읽은 개발 서적들 정리하고 새로운 책을 읽고자 하는 것이라 다음에 제대로 적용해 보는 걸로..
이미지 출처
[React] Component 를 사용하는 기본적인 방법
컴포넌트는 React의 핵심 개념 중 하나이며, 이는 사용자 인터페이스(UI)를 구축하는 기반이다. 컴포넌트를 만들어보자. 우선 여기까지는 순수 JS의 선언 및 정의에 대한 구문이다. 리액트는 컴포
velog.io
소플 - soaple.io
소플
www.soaple.io
'개발 > 리액트' 카테고리의 다른 글
| 리액트 핵심만 훑어보자 #15 컨텍스트 (1) | 2025.04.06 |
|---|---|
| 리액트 핵심만 훑어보자 #14 합성과 상속 (0) | 2025.04.06 |
| 리액트 핵심만 훑어보자 #13 컴포넌트 간 상태 공유 (1) | 2025.03.11 |
| 리액트 핵심만 훑어보자 #12 폼 (1) | 2025.03.09 |
| 리액트 핵심만 훑어보자 #11 리스트와 키 (1) | 2025.03.08 |