이제 레이블과 입력이 다시
좋게 보이도록 합시다
이를 위해 현재 제가 styled-components를 이용하고 있기에
예를 들어
헤더에서 styled components를
css 모듈같은 다른 스타일링 접근법과 적절히 섞어 사용하여
문제 없이 사용할 수 있습니다 그러나 일반적으로는
전체 앱에서 사용할 한 가지의 접근법으로 가지만
원한다면 섞을 수 있습니다
그러나 여기서 저는 styled-component를 조금 더 깊게 살펴보고 싶기에
지금은 레이블을
더 좋아보이게 만드는 것에 집중합시다
이를 위해 여기 styled-components와 관련하여
우리는 물론 대문자로 시작하는
label 상수를 생성합니다
이것은 안에 리액트 컴포넌트를 저장하고
styled.label를 이용해 생성합니다
그리고 우리는 배웠듯이 이 두 개의 백틱을 필요로 합니다
그리고 여기에 레이블 스타일을 추가할 수 있습니다
이를 위해 index.css 안에
어떤 스타일이 적용되었는지 확인합니다
제 경우에는 이 스타일들이 있고
이것들을 다음과 같이 복사하여 여기에 추가합니다
그리고 이제 우리는 단지 정규 레이블 요소 대신에
이 레이블 컴포넌트를 여기에 추가합니다
이런 식으로 label을 추가해줍니다
그리고 일부러 이 styled components에 있는 클래스 이름 속성을
유지하기로 하겠습니다
이것을 저장하면
레이블이 다시 잘 보이는 것을 확인할 수 있습니다
그리고 여기 sign in을 클릭하면 또한
조건부 스타일도 잘 작동하는 것을 볼 수 있지만
이것은 작동하지 않습니다
왜냐하면 몇 styled components 아닌
여기에 동적으로 추가된 css 클래스 때문입니다
이 styled components에 관해
이해하는 것은 매우 중요합니다
이 .으로 스타일한 컴포넌트들은
그냥 childeren 속성을 사용하지 않으므로
이 텍스트와 같이 내용을 둘러쌀 수 있습니다
그러나 추가적으로 styled component에 설정한
모든 속성을 해당 컴포넌트의
기본 jsx 요소로 전달합니다
따라서 여기의 경우 이 내장 레이블입니다
따라서 여기 styled.label 은 시스템 내부에서
다음과 같은 내장 레이블을 생성하고 여기
여러분이 설정하는 모든 속성을 전달합니다
마치 이 경우에는 내부에서 사용하는 레이블에
전달하는 className 속성 같은 것입니다
그런 다음 이러한 스타일도 추가합니다
그러나 이외에도 모든 속성을 전달하고
이는 물론 여기에서 클래스 이름을 설정하는 것에만
유용한 것이 아닙니다 예를 들어
onChange 속성을 설정하여
event listener를 추가하거나
input에 type 속성을 설정하는 등 여러 방면으로 편리하게 사용할 수 있습니다
따라서 이로 인해서 예를 들어
이 input을 styled components로 간편하게
이동시킬 수 있습니다
우리가 해야 할 것은
여기에서 새로운 상수를 생성하는 것뿐입니다
이를 input이라고 말하고 그런 다음 styled.input에 백틱을 사용합니다
그리고 적용해야 하는 스타일을 찾아서
이 경우에는 이러한 스타일을 복사하고
다시 AuthInputs.jsx로 돌아와서 여기에 추가합니다
그리고 이제 이 input 컴포넌트를 다시 사용할 수 있습니다
이 컴포넌트는 styled 컴포넌트를 기반으로 하고
내장된 input 요소를 대체하는 데 사용됩니다
비밀번호에도 동일하게 적용합니다
그리고 우리는 이 속성에 관해 어떤 것도 수정하지 않아도 됩니다
대신에 그냥 작동합니다
그러나 우리는 모든 스타일을 다시 얻었습니다
왜냐하면 우리는 이제 올바르게 styled components를 사용하고 있기 때문입니다
검증이 작동하는 것을 볼 수 있고
onChange 리스너도 여전히 분명히 작동합니다
그렇지 않다면 여기에 입력한 값이
여기로 반영되지 않고
유효한 값을 입력한 후에도 검증에 통과하지 않을 것입니다
그래서 이제 이 모든 속성들이 styled components와 함께 작동합니다