그리고 이것이 Tailwind CSS 소개의
끝입니다
여러분이 보시면 아실 수 있듯이, Tailwind CSS를 사용하다 보면
몇 요소들은 여러 개의 CSS 클래스들을
가지고 있는 것을 보실 수 있고
이것은 여러분이
JSX 코드에 더 추가할 부분이 있다는 뜻입니다
그리고 개발자 분들 중에서는
클래스 이름 목록이 이것처럼 긴 것을
선호하지 않는 분들도 계십니다
하지만 Tailwind가 리액트와 함께 사용할 수 있다는 것은
언급할만 가치가 있습니다
그 이유는 여러분이 사용할 수 있도록
모든 CSS 클래스들을 가지고 있는
이 input 요소처럼 재사용 할 수 있는
유틸리티 요소들을 만들 수 있기 때문입니다
그리고 이러한 긴 클래스 목록을 계속
반복할 필요도 없습니다
그 대신, 여기서 볼 수 있듯이
이 주문 제작된 input 요소들은
조금 더 쉽고 이해하기 쉬운 방법으로 사용되고
모든 CSS 클래스들은 단순히 요소 안에
숨겨져 있습니다
그러므로, 여러분은 이것을 항상 반복할 필요가 없습니다
그래서 리액트 앱을 만들 때 해야 하는 것처럼
컴포넌트들을 모을 때
Tailwind CSS와
여러 개의 클래스를 합쳐서
컴포넌트들을 만드는 이 방법을
사용하는 것은 정말 잘 작동합니다
사실, Tailwind CSS를 사용하는 것은
모든 것들과 마찬가지로
당연하게도 개인적 선호의 영역입니다
Tailwind CSS의 장점은
CSS를 몰라도 사용할 수 있다는 것과
리액트나 웹 앱을 일반적으로
꽤나 빠르게 개발할 수 있다는 것입니다
왜냐하면 보실 수 있듯이
가장 중요한 유틸리티 클래스들을 기억하는데 오랜 시간이 걸리지 않고
특히 이 추가 기능을 사용하시면
사용해야 할 클래스를 제안하고
올바른 클래스를 찾고 요소들과
컴포넌트들의 서식을 설정하는 것을
쉽고 빠르게 완료할 수 있도록 도움을 줍니다
여러분이 국제적 CSS 규칙을 정의하지 않기 때문에
스타일 겹침을 당연히 회피할 수 있습니다
그리고 Tailwind CSS는 이 모든 장점들을 가짐과 동시에
높은 수준의 개인 설정, 맞춤화
혹은 추가 기능을 지녀
여러분의 선호나 필요에 맞춰 정확하게 설정하실 수 있습니다
하지만 여러분은 결국
최소한 몇 개의 요소들에 대해 상대적으로 긴 클래스 이름 값을
가지게 될 것입니다
그리고 당연하게도 적용될 수 있는 어떤 서식 변화도
JSX 코드의 편집을 요구합니다
따라서 서식 코드와 JSX 코드 사이에
강한 분리가 있지 않습니다
또한 여러분은
이 input이나 button 요소들과 같은
상대적으로 작은 래퍼 (wrapper) 요소들이 만들어지게 되는데
이는 그렇게 나쁘지는 않습니다
그것은 약간 리액트 뒤에 있는 목적이기도 하기 때문입니다
개발하고 이것을 사용하는 것은 여전히
가끔 무겁고 어렵게 느껴지실 것입니다
혹은 그렇지 않으시다면
여러분은 대량의 복사 붙여 넣기를 하게 되실 겁니다
왜냐하면 input 요소를 여기에 만들어두지 않는다면
여러분이 앱 내에서 사용하고 싶은 input과
label들에 그 코드를 복사해 붙여 넣어야 할 것입니다
그러므로, 이쪽에 보여지는
이러한 해결책들을 보시면
여러가지 장점과 단점이 있다는 것을 보실 수 있습니다
이제 여러분의 추후 작업들의
다양한 접근에 대한 소개를 마쳤으니
여러분은 개인적으로 가장 좋아하는 해결책을
고를 수 있을 것입니다
이 강좌를 진행하는 동안 저는 Vanilla CSS를 사용할 것인데
그게 제가 여러분에게 리액트를 가르치는 것에만 집중할 수 있도록 해주고
추가적인 CSS 클래스 이름을 적는 것을 피할 수 있기 때문입니다
하지만 여러분의 작업에 있어서는
여러분이 개인적으로 선호하는 접근을 사용하셔야 합니다