따라서 이 시점에서
이 styled-components에 대한 기본적 개념이
명확해졌을 것으로 생각합니다
결국 애플리케이션을 사용할 수 있고
물론 재사용할 수 있는 다음과 같은
작은 wrapper(래퍼)들을 만드는 것입니다
그리고 이것이 인라인 스타일과 비교했을 때의 장점입니다
이 스타일은 jsx 코드와 비슷합니다
그러나 그것은 jsx 코드 안에 있지 않고
우리는 jsx 코드에 복제를 가지고 있지 않습니다
대신에 우리는 이 styled components의 도움을 통해
빌드한 작은 래퍼들을 얻는 것입니다
하지만 동적으로 혹은 조건적으로 스타일을 설정하는 경우에는 어떻게 처리해야 할까요?
왜냐하면 현재 여기서 사용중인 조건부 스타일링은
여전히 조건부로 추가되는
css 클래스에서 나오고 있습니다
언급한대로
여기에서처럼
vanilla css 를 혼합할 수 있지만
일반적으로 리액트 프로젝트에서는 모든 것에 대해
사용할 단일한 솔루션을 선택합니다
따라서 일반적으로 styled components를 사용하는 경우에는
이처럼 css 클래스를 추가하고 싶지 않습니다
그렇다면 이것을 여전히 조건부로
스타일링하려면 어떻게 해야 할까요?
이 경우에는 여기에 특별한 속성을 추가할 수 있습니다
아마도 invalid 속성 같은 것이 될 것이고
이름은 여러분이 마음대로 정하면 됩니다 왜냐하면 결국 이것은
여전히 styled components를 사용하여 만들어진
여러분의 컴포넌트이기 때문입니다
그런 다음 해당 속성에 원하는 값을 추가할 수 있습니다
예를 들어 여기에 저장된
emailNotValid 상수의 값을 사용할 수 있습니다
전에 언급한 대로 여기 이 값은
true 혹은 false가 되며 따라서 이제
레이블 컴포넌트의
invalid 속성에 true 또는 false 값으로 설정됩니다
그리고 이제 styled components 에서는 이렇게 설정된
속성을 사용하여 스타일을 동적으로
변경할 수 있습니다
이를 위해서 label.invalid 클래스를 간단히 살펴보고
이것이 어떤 역할을 하는지 알아봅시다
여러분이 보다시피 이 클래스는
색상을 이 빨간 빛의 색으로 변경합니다
그래서 이 색상을 가져와서
styled label 컴포넌트에서 이 색상 값을
동적으로 설정하고 싶습니다
이를 위해서 다시 한 번
특수한 삽입 문법을 사용할 수 있습니다
이 문법은 이 백틱 사이에서
동적 문자열을 생성하는데 사용할 수 있습니다
styled components에 대해
여러분은 함수를 전달할 수 있고 전달해야 합니다
예를 들어 여기서 이런 화살표 함수를 값으로
왜냐하면 여기에 삽입하는 값들은 최종적으로
styled components 패키지에 의해 정의된 label 함수에서
수집되어 실행되고
이것은
styled component 패키지에서 처리합니다
결국 이것이 최종적으로 tagged templates가 작동하는 방식입니다
동적 값을 주입하면
이러한 tagged template 함수는 주입된 값을
인수로 받습니다
따라서 이것은 styled components 패키지에 의해서
최종적으로 실행되는 함수가 될 것입니다
그리고 이 styled components 패키지는 이 함수를 실행하여
스타일링 규칙에서 이 위치에 사용해야 할 값을
동적으로 도출해냅니다
그리고 이것을 돕기 위해
styled components 패키지는 우리에게
이 함수에 대한 input 으로서 속성 객체를 주고 이것이 실행할 것입니다
물론 이것은 styled 컴포넌트에 설정된
모든 속성을 포함할 것입니다
예를 들어 invalid 속성입니다
따라서 여기에서 styled components 패키지에서 사용해야 할 값을
반환하려면 이제 props.invalid를
살펴볼 수 있습니다
물론 여기에서 구조 분해 할당을 사용하고
이렇게 invalid를 사용할 수도 있습니다
그리고 이 값이 true면 이 빨간색을
false면 이 기본 색상을 사용합니다
이로써 우리는 모든 스타일을 하드 코딩했고
영구적으로 설정하였습니다
그러나 이 스타일은 이제 우리의 속성을 기반으로
동적으로 도출됩니다
따라서 우리가 이것을 다시 로드하고 sign in(로그인)을 누른다면
우리는 이 레이블이 아직도 조건부적으로 스타일 되는 것을 볼 수 있습니다
그러나 이것은 우리의
styled component 때문에 벌어지는 일입니다
왜냐하면 className은 사라졌기에
그것이 이를 야기하는 것은 아니며
대신에 이 새로이 추가된 속성과
여기서 사용된 styled components 기능이 맞습니다
초기에는 이것이 이상하게 보일 수 있으나
실제로는 매우 간단하며
이것이 styled components를 조건부로
스타일링 하는 방법입니다
이제 연습으로
이 input에도 몇 가지의 조건부 스타일을 추가해봅시다
여기에서 멈춰
동영상을 일시 정지하여 스스로 시도해봅시다
그런 다음에 함께 진행하겠습니다
이제 이 입력란에
조건부 스타일을 추가해보겠습니다
이를 위해 먼저 이것이
유효하지 않은지 알려주는 속성을 얻어야 합니다
그리고 이를 위해 우리는 당연히
저의 레이블에서 사용한 동일 invalid 속성을 사용하겠습니다
이제 styled input 컴포넌트 내에서
이 invalid 속성을 사용할 수 있습니다
이 문법은 레이블에 사용한 것과 마찬가지로 작성됩니다
따라서 여기 input에 어떤 스타일이 조건부적으로
적용되어야 할지 살펴봅시다
여기서 여러분은 만약 invalid 클래스가 추가된다면
이 세 개의 설정된 css 속성이 있음을 알 수 있습니다
색상, 기준선 색상 그리고 배경 색상입니다
우리는 이것들을 동적으로 설정하고 싶습니다
그리하여 여기 styled input에서는
우리는 배경 색상으로 가서
우리의 속성을 얻은 이 삽입 문법을 사용합니다
혹은 우리는 invalid 속성에 바로 접근하기 위해
구조 분해 할당을 사용합니다
만약 invalid가 true라면
우리는 이 배경 색상을 여기에 사용하고 싶습니다
따라서 저는 이것을 복사하여 여기에 사용합니다
아니라면 이것은 이 색상입니다
그리고 물론 우리는 invalid 가 true인지 먼저 확인해야 합니다
그것이 배경 색상이었고
이제 문자 색상에 대해
input이 true일 때 적용되어야 할
특별한 색상이 필요합니다 따라서 이 색상을 복사하여
여기서 똑같이 실행합니다
여기에 invalid 속성을 얻고
왜냐하면 우리는 모든 속성을 얻기 때문입니다
invalid가 true인지 확인하고 맞다면
이 붉은 색상을 더하고
아니라면 이 기본 색상을 추가합니다
기준선 또한 동일합니다
우리는 이 코드를 복사하고 여기 투명한 것을 이것으로 대체합니다
그리고 이 투명한 것이 우리의 기본 색상이 됩니다
만약 invalid가 false라면
대안적으로 우리는 이 기준선 색상을 적용합니다
따라서 우리는 이것을 복사하고 여기서 색상으로 사용할 수 있습니다
만약 invalid가 true라면 말입니다
따라서 이제 이를 가지고 저장하고 다시 로딩하고
invalid 상태에 이를 제출하면
이 input에 모든 invalid 스타일이
적용된 것을 볼 수 있습니다
따라서 우리는 당연히 동적 스타일을 레이블과 입력에 적용하기 위하여
styled components를 활용하고 있습니다
그리고 우리는 이것을 패스워드 레이블과 입력에도
동일하게 적용할 수 있습니다
따라서 이 특수한 invalid 속성이
설정되도록만
확인하면 됩니다
그리고 여기서는 비밀번호 레이블에
passwordNotValid 상수에 저장된 값을
전달해야하며
이 값은 마찬가지로 true 또는 false가 될 것입니다
입력에 대해서도 동일합니다
따라서 동일한 styled components를 사용하고
비밀번호 레이블과 입력란에 대해
서로 다른 값을 가진 동일한 속성을 사용합니다
이렇게 하고 저장하고 다시 로딩하면
비밀번호에도 유효하지 않은 값이
입력될 때 조건부 스타일이
적용됨을 확인할 수 있습니다
여기서 styled.components로
속성을 삽입할 때 주의해야 할 것은
당연히 기본적 내장 속성과
충돌하지 않도록
하는 것입니다
기본 내장 속성은 특정 요소들에 존재할 수 있습니다
예를 들어 여기서 여러분은
제가 경고를 받고 있는 것을 보실 수 있습니다
왜냐하면 invalid 속성에 false를 값으로 설정하기 때문이고
결과적으로 이 입력 요소에서 invalid 속성이
내장 속성인 것입니다
이것을 해결하기 위해
styled component에 설정하는 모든 속성들이
기본적인 내장 컴포넌트에 전달될 것입니다
styled components 스타일링 코드에서만 사용하고 싶은
속성에는
일반적으로 달러 기호를 사용하는 것이 일반 규칙입니다
이것은 여전히 유효한 속성 이름으로
자바스크립트에서 허용되지만
내장 속성과는 충돌하지 않습니다
따라서 이를 이메일과 비밀번호에 대한
레이블 및 입력 모두에 대해 수행하고
$invalid를 사용하며
여기도 사용하여
속성 객체에서 빼내어
조건문에서 사용하기도 하고
물론 input 컴포넌트에서도 사용하면
여기서 여러분이 볼 수 있습니다
모든 것을 저장하고 다시 로딩하면
앱은 전처럼 보이고 작동하며
경고는 사라졌습니다
여기까지 기억하고 주의해야 할 사항들이었습니다