테일윈드 CSS로 이동하기 전에
제가 여러분에게 보여드릴 마지막으로
매우 인기있는 리액트 컴포넌트 및 애플리케이션 스타일링
접근 방식이 있습니다
제가 만든 styled components를
다시 살펴보겠습니다
예를 들어, AuthInputs.jsx 파일에서 많은
새로운 컴포넌트가 추가된 것을 볼 수 있습니다
이 div, label, input 그리고 이 button이 그 예시입니다
이 중에서도 특히 이 div는
AuthInputs.jsx에서만
사용되는데
아래에서 ControlContainer 컴포넌트를 사용하고 있고
이 컴포넌트가 다른 부분에서
필요할 가능성은 적습니다
이러한 경우에는 동일한 파일에 저장하는 것이
완벽하고 적절합니다
그러나 label, input, button에 대해서는
더 큰 애플리케이션에서
동일한 스타일을 가진 동일한 컴포넌트가
다른 부분에서 필요할 가능성이 높습니다
따라서 이러한 종류의 컴포넌트를 위해서
별도의 컴포넌트 파일을
만들 수 있습니다
따라서 이러한 스타일 컴포넌트를
해당 파일에 저장할
Button.jsx 파일과
Input.jsx 파일 그리고 Label.jsx 파일을
추가할 수 있습니다
하지만 적어도 input과 label에 대해서는
여러분의 애플리케이션에서 고려할
다른 접근 방식 또는 패턴을 보여드릴 것이고 이것 또한 고려할 수 있는 방법입니다
그러나 일단은 button으로 먼저 시작합시다
우리는 간단히 이 버튼을 여기서 자르고
Button.jsx 파일에 붙여 넣을 수 있습니다
그런 다음 여기에서는 간단히
이 상수 Button을 내보낼 수 있습니다
물론 여기서 styled를 사용하고 있기에
styled component로부터
styled를 가져와야 합니다
이렇게 내보내고 설정한 후에는
AuthInputs.jsx로 돌아가서
당연히 다음과 같이 Button.jsx 파일을 가져올 수 있습니다
따라서 AuthInputs.jsx는 이전과 같이 작동할 것이며
버튼도 이전과 같이 작동하지만
이제 다른 파일에서도 사용할 수도 있습니다
이 간단한 데모 애플리케이션에서는 상관 없지만
여러분이 구축하는
더 큰 리액트 애플리케이션에서는
중요할 것입니다
이제 label과 input에 대해서도
동일한 작업을 수행할 수 있으나
여기서는 label과 input의 조합이 너무 공통이라고 생각하기에
하나의 단일 컴포넌트로 합치는 것이
좋을 것 같습니다
이를 위해 AuthInputs.jsx 파일에서
이 input 및 label 컴포넌트, 즉 두 styled 컴포넌트를 가져와서
여기서 Input.jsx로 이동시킵니다
그런 후에 물론 styled components 에서
styled를 가져와 여기에서도
import해야 합니다
그러나 이제 저는 실제로 이 두 컴포넌트를 다음과 같이 내보내지는 않고
대신에 충돌을 피하기 위하여 이름을 CustomInput으로 지은 새로운 컴포넌트 함수를 내보낼 것 입니다
여기에서는 간단히 스타일된 label 과
스타일된 input을 사용하는 래퍼(wrapper)로 p 태그를 반환할 것입니다
그러나 이제 여기서는
이 커스텀 입력 컴포넌트 함수가 있고
이것은 이미 이 강의에서 여러 번 만들었던 컴포넌트 함수입니다
여기에서는 label 속성을 받아들이고
제 컴포넌트이기에
여기에서 필요한 어떤 속성이든 받아들일 수 있습니다
그런 다음에 이 세 온점 연산자를 사용하여
받아들이는 다른 속성을 속성 객체로 병합하는데
이것은 이와 같이 객체 구조 분해 할당을 사용할 때 쓸 수 있습니다
이렇게 하면
이 label 텍스트를 child로 전달할 수 있습니다
그리고 여기 input에는
받아들인 남은 속성을 펼쳐서
예를 들어서 onChange 속성이
input 으로 전달되거나 type 속성으로 전달되도록 합니다
추가적으로 여기에서는 커스텀 입력에서
invalid 속성을 기대하고
styled components에서 예상하는
$ invalid 속성의 값을 사용하겠습니다
그것을 label과 input 양쪽에 사용하겠습니다
이렇게 하면 제가 내보내는 커스텀 입력 컴포넌트가 생기고
AuthInputs.jsx 파일에서
이를 사용할 수 있습니다
거기에서 저는 Input.jsx에서 제 커스텀 입력을 가져올 수 있고
여기에서는 그냥 Input으로 이름 부를 수 있습니다
여기서의 이름은
이 컴포넌트 함수 파일와 다를 수 있습니다
왜냐하면 이것은 기본 내보내기이고
따라서 AuthInputs.jsx에서 여기와 같이 가져오기 때문입니다
그리고 이제 별도로 레이블을
설정하는 대신에
이 커스텀 입력을 사용할 수 있고 이러한 paragraph는 모두 삭제할 수 있습니다
대신 여기에서는 이제 단순히
invalid 및 label 속성을 받아들이는 입력이 있습니다
여기에서는 레이블이 email 이라는 속성을 전달합니다
그리고 여기에는 이러한 속성들이
어떻게 설정되어있는지에 따라 기본 입력으로 전달될 것입니다
그리고 두 번째 입력도 따라서
invalid 속성과 password라는 레이블을 받습니다
이렇게 저장하고 이 입력을 다시 로딩하면
label 과 input이 전과 같이 작동하며
여전히 유효한 값이 입력되어 유효한 값을 제출할 수 있습니다
그러나 이제 재사용 가능한 결합된 입력 컴포넌트가 생겼기에
물론 이 패턴 및
접근 방식을 사용하지 않더라도
당연히 styled components를 사용하지 않는 경우에도
일반적인 css 클래스를
여기에 간단히 추가하거나
label과 input에 일반적인 css 클래스를 사용할 수 있습니다
이 강의 주요 포인트는
리액트 개발자로서
항상 재사용 가능한 컴포넌트를
외부로 분리할 수 있는 기회를 찾아줘야 한다는 것입니다
이러한 컴포넌트는
애플리케이션의 다른 부분에서 필요한 특정 스타일이 적용된 경우가 많습니다
또는 jsx요소의 특정 조합이
다른 부분에서 재사용될
필요가 있는 경우도 있습니다
결국 이는 이미 이전 섹션에서
계속하여 수행해왔던 부분입니다
그러나 이제 우리는 컴포넌트를 어떻게
분할하고 재사용할지에 대한
선택에 영향을 미칠 수 있는
스타일링을 또 다른 요소로
고려하고 있습니다
그리고 이것으로 styled components에 대한 내용이 마무리됩니다
Styled components는 상대적으로 빠르고 쉽게
애플리케이션에 추가할 수 있는
장점이 있습니다
여러분이 보셨듯이 다양한 styled component를 추가하는 것은
꽤 간단하며
많은 추가 작업이 필요로 되지 않습니다
또 다른 장점은 최종적으로
구성 가능한 스타일 함수와 함께 작업하기에
결국 여러분은
그냥 리액트에서 생각하면 된다는 것입니다
이것은 결국 컴포넌트를 다루는
개념과 아이디어와 거의 동일합니다
또 다른 이점은
스타일이 자동으로 범위가 지정된다는 것입니다
따라서 css 규칙이나 스타일 충돌이 발생하지 않지만
styled component를 사용하려면 css을 알아야 합니다
왜냐하면 여기에서는 표준 css 코드를
작성했기 때문입니다
이는 물론 장점일 수도 있지만
css를 모르거나 싫어하는 경우에는
단점이 될 수도 있습니다
물론 이제 스타일이
컴포넌트 옆이나 컴포넌트와 동일한 파일에
정의 되어 있기에 리액트와 css 코드 사이에서
강한 분리가 없습니다
또한 생성한 버튼이나 입력 컴포넌트와 같은
비교적 작은 래퍼(wrapper) 컴포넌트가 많이
생기는 경향이 있습니다
이것이 반드시 나쁜 것은 아닙니다
결국 리액트에서는 컴포넌트 생성 및
재사용이 핵심 개념이기 때문입니다
그럼에도 불구하고 모든 이 추가적인 작은 컴포넌트를
스타일링 목적으로만 생성하는 것은 가끔은 불편할 수도 있습니다