대부분의 리액트 애플리케이션에는
우리가 여기서 인라인 스타일로 수행하는 것과 같이
동적으로 스타일을 지정해야 되는 부분이 있습니다
그러나 언급한 대로 인라인 스타일에는 특정 단점이 있으며
이 앱에서는 이를 원하지 않기에
독립된 css 파일과
클래스 이름을 사용하도록 전환하겠습니다
물론 앞서 언급했듯이
나중에 이 섹션에서 다른 스타일링 옵션에 대해
또 알아보겠습니다
그러나 여기서 이미 볼 수 있듯이
당연히 추가적인 css 파일을 사용할 때도
조건부로 요소를 스타일링 할 수 있습니다
이는 일반적으로 조건에 따라 css 클래스를 추가하여 실행됩니다
여기에서 중요한 것은
조건부 클래스를 적용하지 않으려면
삼항연산자를 사용하고 클래스 이름으로
undefined를 추가해야한다는 것입니다
왜냐하면 여기서 이
&&로 단축 방법을 사용하면
기술적으로 작동할 수 있지만
결과적으로 앱을 다시 로딩하게 되면
콘솔에서 경고가 표시됩니다
왜냐하면 이는 이 방법을 사용하면
이 조건이 충족되지 않으면
즉 false인 경우에 이 값을
클래스 이름으로 설정하게 되기 때문입니다
그리고 이게 불리언이기 때문에
기본적으로 클래스 이름으로서 유효하지 않는 값이고
따라서 우리가 여기서 경고를 받게 되는 것입니다
따라서 이것이 우리가 클래스 이름을 조건부적으로 더할 때
삼항 연산자 접근법을
사용해야하는 이유입니다
이제 물론, 이미 항상 적용되어야 하는
클래스를 가진 요소에
동적으로 클래스를 추가하는 경우도 있을 수 있습니다
예를 들어서 여기 이메일 label에서
className을 추가하고
이 label은 항상 label 클래스를 가져야 한다고
가정해 봅시다
이 프로젝트에서는 실제로는 필요하지 않지만
물론 이러한 label 클래스가 필요한 경우도
있을 수는 있습니다
이 클래스는 특정 조건이 충족될 때 뿐 아니라
항상 적용되어야 합니다
그리고 이 label 클래스에 추가로 이 입력란에
유효하지 않은 값이 입력되게 되면
이 레이블에 invalid 클래스를 추가하고자 합니다
여러분에게 제공한 여기 index.css 파일에
css 파일에서
유효하지 않은 구문이 있는 경우
색상을 변경하는 규칙이 있습니다
그리고 추가로 해당 규칙에도
invalid 클래스가 있도록
이 규칙을 변경할 수 있기에
실제로 이 label 클래스도 필요하게 됩니다
이렇게 저장하면
이제 이 label이 빨간색으로 표시되지만
당연히 항상 invalid 클래스를 추가하고 있으므로
언제나 빨간색입니다
이 클래스를 조건부로 추가하고
항상 필요한 이 클래스와 병합하기 위해서는
동적으로 className 에 값을 설정하고 백틱을 활용하여
템플릿 리터럴로 설정할 수 있습니다
따라서 작은 따옴표가 아닌 키보드에서 찾을 수 있는
특수한 백틱 문자입니다
이는 자바스크립트에서 문자열을 만드는 또 다른 방법입니다
이 접근 방식을 사용하여 문자열을 만들 때
특수한 자바스크립트 구문을 사용하여
이 {} 로 이어지는
$ 문자를 활용하여
이 문자열에 동적 값을 삽입할 수 있습니다
이 접근 방식은 이 label과 같이
하드코딩(고정적인 값의 코딩)된 값과
동적으로 삽입된 값이 포함된 문자열을 만들 수 있게 합니다
더 긴 문자열을 구성하는 데
필요한 만큼 많은 값을 삽입할 수 있습니다
따라서 여기에 emailNotValid를 확인하고
그렇다면 invalid 클래스를 삽입하고
그렇지 않으면 이 문자열에 빈 문자열을 삽입하여
이 전체 문자열이 항상 이 단어
label을 포함하고
이 조건이 충족되면 단어 invalid가 포함된
문자열이거나 그렇지 않으면 아무것도 없는 문자열이 될 수 있도록 할 수 있습니다
따라서 이렇게 하면
저장하고 다시 로딩하면
기본적으로 레이블은 회색빛으로 보입니다
그러나 유효한 값이 입력되지 않은 채
sign in을 클릭하면 이렇게 유효하지 않은 스타일이 적용되는 것을 볼 수 있고
따라서 이것이 스타일을 병합하는 방법 및
조건에 따라 일부 클래스를 추가하고
일부 클래스를 영구적으로 추가하는 방법입니다
그리고 물론 이것을 여기 아래 패스워드 레이블에
복사하고 붙여넣기 할 수 있습니다
이제 이것을 저장하고
다시 로딩한 후 이 두 필드 중 어떤 것이든 유효하지 값을
입력하지 않은 채 클릭하면
보다시피 두 개의 레이블 모두 강조되고
이것이 여러분이 vanilla css에 동적으로
조건에 따라 스타일을 적용하는 방법입니다