따라서 비록 여기서 더 이상 필요로 하지 않기에
이 paragraph로부터 인라인 스타일을 지우겠지만
이제부터는 인라인 스타일링에 집중합시다
일단은 AuthInputs로 바꾸고
여기서 입력이 유효하지 않다면
조건에 따라 스타일을 변경하고 싶다고 해봅시다
그리고 저는 이것을 여기에 조건에 따라
클래스 이름을 추가함으로서 이미 하고 있습니다
그리고 이것으로 잠시 뒤에 다시 돌아오겠습니다
일단은
입력에 대해 이 코드에 관해 주석 처리 해봅시다
그리고 이것을 인라인 스타일을 추가함으로서
달성해 봅시다
먼저, index.css 파일을 살펴봅니다
그리고 여기서 이 invalid 클래스
즉 invalid 스타일을 적용하는 데 책임이 있는 것을 살펴봅시다
그리고 배경 색을 설정해봅시다
따라서 유효하지 않다면
이 입력에 붉은 색을 활용합니다
이를 통해 당연히 우리는 배경 색을 지정할 수 있습니다
이제 최종적으로 조건부로
그리고 동적으로 값을 설정하는 것은 꽤 간단합니다
우리는 단지 우리의 조건이 무엇인지 확인하고
이상황에서는 이 emailNotValid 상수는
이 코드의 결과에 따라
true 혹은 false을 포함합니다
즉, 결국 이 조건에 따라서 말입니다
따라서 우리는 그냥 이 emailNotValid를
삼항연산자에서 사용하여 true일 때 적용되어야 하는
배경 색을 설정할 수 있습니다
따라서 만약 이메일 주소가 유효하지 않다면
다음과 같이
색상을 정의할 수 있습니다
이메일이 유효할 때는
여기에서 저는
이 붉은 색을 적용하고 싶습니다
아니면 저는 여기의 배경색인
연회색 컬러인
기본 배경 색을 적용하고 싶습니다
그러므로 이 경우에 우리가 여기에서
삼항연산자의 else 부분에 사용하려는 값은 다음과 같습니다
그리고 이것이 끝입니다
저장한다면
여기서 sign in(로그인)을 누르면
여기 입력이 조건부 스타일링 덕분에 강조되고
연빨강색으로 강조 됩니다
그리고 당연히 임시 값으로
그냥 빨강으로 활용하게 되면 더욱 명확해집니다 왜냐하면 빨강은 이런 식으로 잘 보이니까요
다른 접근법으로 바꾸어 봅시다
인라인 스타일링을 사용할 때
동적 및 조건부 스타일을 추가할 수 있습니다
물론 여기에서도
패스워드 입력란에 동일한 작업을 수행할 수는 있지만 저는 하지 않을 것입니다
왜냐하면 인라인 스타일링의 단점은
종종 많은 중복이 발생하고
모든 css 코드가 jsx코드에 들어가게 되어
이상적이지 않다는 것입니다
그러므로 다음 단계로 이 클래스의
이름을 살펴보고
vanilla css를 사용할 때
요소를 조건부로 스타일링 하는 방법을 알아보겠습니다