styled-components 공부 정리
오늘 수업시간에 마지막 문제로 풀었던 코드
import { useState } from "react";
import styled from "styled-components";
// TODO: button이 눌렸을 때, gray 처리
// TODO: 취소 버튼이 눌리면 gray 처리된 것이 없도록
const App = () => {
const 초기값 = [
{
id: 1,
name: "홍길동",
isFemale: false,
score: 30,
},
{
id: 2,
name: "홍길순",
isFemale: true,
score: 60,
},
{
id: 3,
name: "김르탄",
isFemale: true,
score: 80,
},
];
const [people, setPeople] = useState(초기값);
const [activeId, setActiveId] = useState(2);
return (
<div>
<div>
{people.map(function (person) {
return (
<StyledButton
key={person.id}
$p={person}
$activeId={activeId}
onClick={() => {
// alert(person.id);
setActiveId(person.id);
}}
>
{person.name}
{person.score}
</StyledButton>
);
})}
</div>
<button
style={{
marginTop: "20px",
width: "100%",
backgroundColor: "aquamarine",
}}
onClick={() => {
setActiveId("");
}}
>
취소
</button>
</div>
);
};
export default App;
// TODO: 여기를 바꾸세요.
// 점수가 50점 이하 : 빨간색
// 점수가 51점 ~ 70점 : 초록색
// 점수가 71점 이상 : 파란색
const StyledButton = styled.button`
background-color: ${function({ $p, $activeId }) {
if ($p.id === $activeId) {
return "gray";
}
if ($p.score > 71) {
return "blue";
} else if ($p.score <= 50) {
return "red";
} else {
return "green";
}
}};
`;
1. props를 내려주기
<div>
{people.map(function (person) {
return (
<StyledButton
key={person.id}
$p={person}
$activeId={activeId}
onClick={() => {
// alert(person.id);
setActiveId(person.id);
}}
>
{person.name}
{person.score}
</StyledButton>
);
})}
</div>
1. <StyledButton> 컴포넌트에서 person과 activeID 값을 props로 내려준다.
2. person은 사람들의 정보가 담긴 state 값, activeId는 버튼의 id값을 저장해주는 state이다.
3. onClick을 통해 누른 버튼의 id 값을 activeId에 담기게 된다.
// StyledButton 컴포넌트
const StyledButton = styled.button`
background-color: ${function({ $p, $activeId }) {
if ($p.id === $activeId) {
return "gray";
}
if ($p.score > 71) {
return "blue";
} else if ($p.score <= 50) {
return "red";
} else {
return "green";
}
}};
`;1. $p, $activeId를 props로 받아서 반복문을 돌게 된다.
2. $p는 person을 props로 내려준 것이기에 사람들의 score을 비교해 색상을 나눠 줄 수 있다.
3. 그리고 사람들의 id인 $p.id와 버튼을 누른 값을 저장한 activeId의 state가 같은 경우 버튼 색을 회색으로 변경해주는 로직도 넣어놨다.
마지막 추가 문제
취소버튼을 누르면 회색이 없어지게 해주세요
<button
style={{
marginTop: "20px",
width: "100%",
backgroundColor: "aquamarine",
}}
onClick={() => {
setActiveId("");
}}
>
취소
</button>
위에서 $active state에 id 값을 저장했었다. 그 값을 빈값으로 바꿔주면 자연스럽게 회색이 사라질 것 같았고 onClick 이벤트에 넣어주니 잘 작동을 하게 되었다.
이번 실습을 통해 느낀 점
props를 통해 스타일을 전달하고 가공하는 방법은 처음에는 익숙하지 않아서 상당히 어렵게 느껴졌다.
특히, styled-components를 사용하여 동적인 스타일을 적용할 때, props의 역할이 얼마나 중요한지 알게 되었지만, 그 개념을 제대로 이해하고 활용하는 데는 시간이 좀 걸렸다.
예를 들어, 컴포넌트에 특정 스타일을 적용하고 싶을 때, 단순히 CSS 클래스를 사용하는 것이 아니라, props를 통해 조건에 따라 스타일을 변경하는 방식이 처음에는 생소하게 다가왔다.
처음에는 props를 통해 전달된 데이터를 어떻게 가공하고, 이를 스타일링에 반영할 수 있는지에 대한 개념을 이해하는 데 어려움이 있었다. 코드 안에서 props가 어떻게 전달되고, styled-components 내부에서 어떻게 활용되는지 이해하는 데 시간이 필요했다. 특히, props를 통해 조건부로 스타일을 변경하는 로직을 작성할 때, 여러 가지 조건을 고려해야 했기 때문에, 헷갈리는 부분이 많았다.
그러나 여러 번의 실습을 통해 점차 익숙해지기 시작했다. 아직은 어렵지만 props를 통해 전달된 데이터를 가공하여 동적인 스타일링을 적용하는 것이 어느 정도 자연스럽게 느껴지기 시작했다. 배워야 할 것들이 많고, 실수도 있지만, 실습을 통해 점점 더 이해가 깊어지고 있는 것을 느낀다.