Styled Components를 사용한 React에서 조건부 렌더링 시 props 활용

Props는 조건부 렌더링에도 사용할 수 있습니다. 이전 강의에서 작업했던 React 컴포넌트 Block를 가져오겠습니다.

첫 번째 입력 필드의 배경은 노란색으로, 다른 입력 필드의 배경은 녹색으로 만들어 보겠습니다. 이를 위해 Input 컴포넌트의 스타일에 한 줄을 더 추가하면 다음과 같습니다:

const Input = styled.input`
	background: ${(props) => (props.first ? 'yellow' : 'green')};

	margin: 5px;
	font-size: 18px;
`;

첫 번째 입력 필드에 first prop을 추가하겠습니다:

<Container>
	<Input first />
	<Input placeholder="name" type="text" />
	<Input type="password" />
</Container>

강의 이론에 나온 조건부 렌더링을 사용하여, 이전 강의의 과제 솔루션 코드를 수정하세요. warn prop이 있을 경우 버튼 텍스트는 빨간색, 배경은 노란색이 되고, prop이 없을 경우에는 배경은 녹색, 텍스트는 흰색이 되도록 만드세요. 두 번째 버튼에 warn를 전달하세요.