props를 이용한 conditional styles

이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다.

 

🔗링크

https://www.udemy.com/course/react-styled-components/

React styled components v5 (2021 edition)

 

 

 

 

 

 

 

🌞 목표

이번 시간에는 styled-components에 props를 넣어서

props 값에 따라 (조건적으로) 다른 스타일을 렌더링하는 방법을 배웠다.

 

 

 

 

 

📂 components > App.js

function App() {
	return (
		<>
			<GlobalStyle />
			<h1>App.js</h1>
			<Button>Primary Button</Button>
			<Button secondary>Secondary Button</Button>
		</>
	);
}

 

두 개의 Button 컴포넌트를 만들었다.

첫 번째 Button에는 아무런 props를 넣어주지 않았고

두 번째 Button에는 'secondary'라는 props를 넣어주었다. 

(props 이름만 넣어준 경우 boolean 타입. default 값은 true)

 

 

 

 

 

 

📂 common > Button.js

import styled from "styled-components";

const Button = styled.button`
	display: block;
	width: 100%;
	color: white;
	background-color: ${(props) => (props.secondary ? "black" : "#f8049c")};
	font-size: 1em;
	font-weight: bold;
	padding: 8px;
	border-radius: 4px;
	border: none;
	box-shadow: none;
	white-space: none;

	&:disabled {
		background: #eee;
		color: #666;
	}
`;

export { Button };

 

Button의 background-color를 props에 따라 다르게 스타일링 하고 있다.

props가 들어와서 props.secondary를 체크한다.

props.secondary가 true이면 ( secondary라는 props가 선언되어 있으면) 배경색은 "black"이 되고

props.secondary가 false이면 배경색은 "#f8049c"가 적용된다.

 

그래서 예상해보면,

첫 번째 버튼에는 secondary라는 props가 없기 때문에 #f8049c가 적용될 것이고

두 번째 버튼에는 secondary라는 props가 있기 때문에 black이 적용될 것이다.

 

 

 

 

 

 

💻 렌더링 된 모습