1. 스타일 컴포넌트 사용 방법
백틱 안에서 스타일 코드를 작성한 뒤,
이렇게 태그 형식으로 스타일을 줄 수 있다.
If 문, 삼항연산자 등의 자바스크립트 문법을
사용할 수 있다는게 가장 큰 장점이다.
const StBox = styled.div`
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px;
`
return (
<StBox>
Hello
</StBox>
);
porps의 값에 따라 선택된 항목만 스타일 변경을 줄 수 있다.
// 1. styled-components를 만들었습니다.
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1px solid ${(props) => props.borderColor}; // 4.부모 컴포넌트에서 보낸 props를 받아 사용합니다.
margin: 20px;
`;
const App = () => {
return (
<div>
{/* 2. 그리고 위에서 만든 styled-components를 사용했습니다. */}
{/* 3. 그리고 props를 통해 borderColor라는 값을 전달했습니다. */}
<StBox borderColor="red">빨간 박스</StBox>
<StBox borderColor="green">초록 박스</StBox>
<StBox borderColor="blue">파랑 박스</StBox>
</div>
);
};
그리고 반복되는 태그들을 map함수로
관리의 용이성을 더해줄 수 있다.
// src/App.js
import React from "react";
import styled from "styled-components";
const StContainer = styled.div`
display: flex;
`;
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1px solid ${(props) => props.borderColor};
margin: 20px;
`;
// 박스의 색을 배열에 담습니다.
const boxList = ["red", "green", "blue"];
// 색을 넣으면, 이름을 반환해주는 함수를 만듭니다.
const getBoxName = (color) => {
switch (color) {
case "red":
return "빨간 박스";
case "green":
return "초록 박스";
case "blue":
return "파란 박스";
default:
return "검정 박스";
}
};
const App = () => {
return (
<StContainer>
{/* map을 이용해서 StBox를 반복하여 화면에 그립니다. */}
{boxList.map((box) => (
<StBox borderColor={box}>{getBoxName(box)}</StBox>
))}
</StContainer>
);
};
export default App;
2. 전역 스타일링
공통된 스타일을 적용시킬 때에는
const GlobalStyle = createGlobalStyle``
해당 createGlobalStyle API를 활용하여
`` 백틱 안에 스타일 코드를 작성해주면 된다.
3. Sass (Syntactically Awesome Style Sheet)
코드의 재사용성을 높이고
가독성을 향상시킬 수 있는 CSS 언어
(1) 변수 사용
color 값이나 borderRadius등
수치를 저장해서 값을 변수로 할당할 수 있다.
이는 재사용성을 높이고 human Erorr를 줄여준다.
(2) Nesting
중첩해서 사용 가능하다.
(3) import export
변수만 저장해놓은 파일과
스타일을 작성한 코드를 분리하여
가독성을 향상시킬 수 있다.
'React' 카테고리의 다른 글
[React] Redux 설치, 사용법 (0) | 2023.11.10 |
---|---|
[React] Hooks (useState, useEffect, useRef, uesContext, uesMemo) (2) | 2023.11.09 |
[React] 클래스 이름 함수와 섞기 (0) | 2023.11.07 |
[React] 컴포넌트, JSX, Props (1) | 2023.11.01 |
[React] State란? (0) | 2023.11.01 |