이제 동적 또는 조건적 스타일에 대해 어떻게 생각하시나요?
예를 들어, 우리의 Input 컴포넌트에서
우리는 일부 스타일과 색상을 변경하고 싶습니다
만약 invalid 속성이 설정되었다면 말입니다
이 또한 간단하게 처리할 수 있습니다
여기서는 이 styled.component를 제거하고
우리의 커스텀 컴포넌트 이름을 변경하여
다시 단순히 Input으로 하는 것입니다
그리고 여전히 label, invalid 속성과
그리고 모든 나머지 속성도 수용할 것이지만
우린 여기서 다시 전으로 돌아가
일반 내장 label로 갈 것입니다
그리고 이 속성을 제거하고
일반 input으로 돌아갑니다
여기서도 또한 이 $invalid 속성을 제거할 것입니다
그리고 이제 물론 여기에서 다시
Tailwind 유틸리티 클래스를 적용할 수 있습니다
그리고 이 작업을 덜 번거롭게 만들고
수동으로 입력할 필요가 없도록 하기 위해
Input.jsx 파일이 첨부되어있는 것을 보실 수 있습니다
여러분은 간단히 해당 파일의 내용을 복사하여
여러분의 Input.jsx파일에 붙여넣을 수 있습니다
이렇게 하면 클래스 이름이 있는 label과
추가해야 할 모든 Tailwind 클래스를 포함하는
label과 input이 생성됩니다
이는 필요한 모든 클래스가 추가된 것입니다
이렇게 하면 저장했을 시
여러분은 label과 input이 약간 변경된 것을 볼 수 있습니다
그러나 일반적으로 이 스타일은
이전과 유사하다는 것을
연한 회색 텍스트, 회색 배경 등으로 알 수 있습니다
그러나 유효하지 않을 경우에는
해당하는 조건부 스타일링이 없습니다
그러나 조건부로 이 스타일을 조정하는 것은
실제로 꽤 간단합니다
우리는, 예를 들어 이 labelClasses를 값으로 포함하는
labelClasses 변수를 만들 수 있습니다
그런 다음 여기에 if 문을 추가하여
invalid가 true인지 확인할 수 있고
그 경우에는 우리는 이 labelClasses를 다른 클래스 목록으로
변경하고 싶습니다
그런 다음 여기에서 우리는 그 labelClasses를 값으로 설정합니다
이 경우에는 클래스가
대부분 동일합니다
따라서 우린 이렇게 복사할 수 있습니다
그런 다음 단순히 텍스트 색상을
text-stone에서 다른 색상으로 변경하고 싶습니다
그러므로 저는 여기서 'text-stone'을 복사하지 않을 것이고
대신에 별도의 색상, 예로 text-red-400과 같은 것을
설정할 것입니다
그리고 이렇게 하면 다시 로딩하면,
형식을 유효하지 않은 상태로 제출하면
label이 빨간색이 되는 것을 볼 수 있습니다
이렇게 하면 Tailwind를 사용하여
조건부로 스타일을 적용할 수 있습니다
물론 여기서 모든 스타일을 반복하는 것은
invalid가 true이던 false이던 동일한 스타일이기 때문에
다소 번거로울 수 있습니다
따라서 조금 더 나은 대안은
text-stone-300을 포함하지 않은
기본 labelClasses 문자열을 설정하는 것입니다
대신 변하지 않는 기본 클래스만 포함합니다
그리고 invalid가 true인 경우 여기에 이 빨간 텍스트 색상을
추가하기만 하면 됩니다
또한 그렇지 않은 경우에는 여기에 text-stone-300 클래스를 추가하되
이곳의 기본 클래스에 설정된 마지막 클래스 뒤에
공백이 있도록
추가하면 됩니다
따라서 이 공백은
이것이 긴 하나의 클래스가 되지 않고
대신 두 개의 별개의 클래스로 유지되도록 하는데 중요합니다
이제 어떤 기본 클래스에 따른
특정 조건에 따라 다른 클래스를 설정하는
신속한 방법이 되었습니다
이제 물론 input에 대해서도 동일한 작업을 수행할 수 있습니다
우리는 input 클래스 문자열을 설정할 수 있으며
이것은 결과적으로 이 문자열이 되는 것입니다
따라서 이를 잘라내어 여기에 설정하고
유효하지 않은 경우에는 더 많은 클래스를 연결하여
input 클래스를 조정할 수 있으며, 유효하지 않은 경우에도 또한
동일한 작업을 수행할 수 있습니다
이제 input에 대해서는 텍스트 색상뿐만 아니라
더 많은 스타일이 변경되어야 합니다
따라서 기본 클래스에서 이를 잘라내어
invalid가 false인 경우 여기에 추가할 수 있습니다
이는 기본 스타일로 되는 것입니다
그리고 배경색에 대해서도 동일한 작업을 수행할 수 있습니다
이것을 여기에서 잘라내어 invalid가 false인 경우에 여기에 추가하세요
만약 invalid가 true면
대신에 전 여기에 text-red-500, bg-red-100
그리고 border-red-300을 추가하고 싶습니다
그리고 이렇게 하면 다시 이 input 클래스를 여기서 값으로 사용하여
input의 클래스 이름으로 설정할 수 있으므로
JSX 코드가 다시 간결해집니다
그리고 여기에서는 특정 조건에 따라
일부 Tailwind 클래스를 추가하는 스타일링 코드를
얻었습니다
또한 이렇게 저장하면 기본 모양을 얻을 수 있습니다
그리고 그대로 로그인을 클릭하면 invalid 스타일이 나타납니다
이렇게 거의 전체 앱을 바꿨습니다
이제 여기의 input 배경과 두 번째 버튼만
변경하면 됩니다