Styled Components에서 Props 사용하기

지난 강의에서 우리는 Styled Components 라이브러리를 사용하여 스타일링된 컴포넌트가 일반 React 컴포넌트처럼 사용될 수 있다는 것을 배웠습니다. 이번 강의에서는 여기에서도 props가 비슷하게 작동한다는 것을 보게 될 것입니다.

우리가 React 컴포넌트 Block을 가지고 있고, Styled Components를 사용하여 스타일링된 컴포넌트 Input와 Container를 생성했다고 가정해 보겠습니다:

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

세 개의 Input 컴포넌트를 Container 내에 배치해 봅시다:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

Props를 사용하여 컴포넌트에 다양한 속성을 설정할 수 있습니다. 두 번째 인풋에 속성 placeholder와 type를 각각 값 name와 text로 설정하고, 세 번째 인풋의 속성 type는 값 password로 설정해 보겠습니다:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

빈 React 컴포넌트 Block를 생성하고, 그 안에 세 개의 버튼이 있는 div를 만드세요. Styled Components 라이브러리를 사용하여 이 div와 버튼들을 스타일링하세요. Props를 사용하여 첫 번째 버튼을 비활성화하고, 세 번째 버튼을 타입 reset으로 만드세요.