클래스나 아이디값을 주지 아니하고 스타일 시트를 임포트하지 아니하고...
박스 삼형제의 border 스타일을 지정해보자. 먼저 styled-components 익스텐션을 설치해 줘야 한다. 그리고 나서 yarn add styled-components 명령어를 입력해주면 준비 갈 완료!
const StBox = styled.div`
width: 100px;
height: 100px;
border: 1px solid ${(props) => props.borderColor};
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
`;기본적인 구조는 이렇다. 백틱으로 감싸주면 끝!
// 실행 기준이 되는 함수
const boxList = ["#ff5353", "#5e96ff", "#53ff87"];
// p 태그로 직접 박스 안에 '빨간박스' 라고 쓰지 않고, border 속성에 따라 return 값을 출력해주는 함수!
const getBoxName = (color) => {
switch (color) {
case "#ff5353":
return "빨간박스";
case "#5e96ff":
return "파란박스";
case "#53ff87":
return "초록박스";
default:
return "흰박스";
}
};
const App = () => {
return (
<div>
// div 태그 안에서 js 문법을 사용할 것이기 때문에 {} 로 묶어준다.
{boxList.map((boxColor) => {
// map 함수로, 박스의 각 컬러를 요소로 하는 boxList 배열을 순회하며 return 값을 반영한 새로운 배열을 반환해준다.
return (
// 스타일 속성을 적용한 StBox 를 생성하는 코드
// key 값은 props를 구분짓기 위해 필수! 여기서는 컬러값이 고유하기 때문에 boxColor 로 명명했다.
<StBox key={boxColor} borderColor={boxColor}>
// 이 boxColor 의 값이 위의 border: 1px solid ${(props) => props.borderColor}; 부분에 borderColor 값으로 들어가며 StBox의 스타일 속성을 완성해준다.
{getBoxName(boxColor)}
// 박스 안에 들어갈 문구를 출력해주는 getBoxName 함수를 실행, 인자값으로 준 boxColor 는 getBoxName 함수 실행의 인자값으로 들어간 color 와 같은 요소!!
</StBox>
);
})}
</div>
);
};나머지 코드에 대한 해석 😎
:D