이제 우리는 vanilla css에 빌드된 솔루션을
꼼꼼히 확인해 보았습니다
마지막에는 css 모듈이라도 최종적으로는
vanilla css를 사용하게 됩니다
이제 우리는 리액트 컴포넌트를 스타일링하는
완전히 다른 방법을 탐색해보겠습니다
styled-components 패키지는 vanilla css 를 기반으로 하는
하나의 솔루션 중 하나로 리액트 프로젝트에서 사용할 수 있습니다
이 인기 있는 패키지의 개념은
css 규칙이나 스타일을 별도의
css 파일이나 인라인 스타일로 정의하지 않고
대신에 해당 패키지의 도움을 받아 생성된 특별한 컴포넌트
내에서 정의하는 것입니다
이 패키지를 이해하기 위해서는
먼저 설치해야 합니다
로컬에서 설치하려면
터미널을 열고 npm install styled-components를 실행합니다
혹은 CodeSandbox에서는 의존성 영역으로 이동해서
styled-components 를 의존성으로
추가할 수 있습니다
이렇게 하면 해당 프로젝트에
패키지가 설치되고 사용이 가능해집니다
로컬로 설치한 경우에는
개발 서버를 다시 시작해야 되지만
CodeSandbox에서는 필요하지 않습니다
이제 설치가 완료되면 이 AuthInput에서
우리는 여기 div를 스타일하고 싶습니다
style-components 패키지의 도움을 받아서 말입니다
이제 이 AuthInputs.jsx 에서
styled-components에서 가져온
styled라는 것을 사용해야 합니다
따라서 여러분은
styled를 styled-components로부터 import하고
이제 여기 같은 파일에서
JavaScript 객체인 styled를 사용하여
. 표기법과 함께 다른 속성에 접근합니다
그리고 여기서에서 h1
h2 등의 html 요소와
div 요소 등에 매핑되는 속성들이 있습니다
이것들은
div를 개별 컴포넌트로 만들고
어떤 스타일이든 여러분이 적용하고 싶은 스타일을 가지는 컴포넌트로 만듭니다
다음으로 여러분이 전에는 보지 못했을
스타일을 정의할 때 특이한 문법을 사용해야 합니다
여기 요소 속성 다음에
여러분은 두 개의 백틱이 필요합니다
여기 div 바로 다음입니다
여기서 다시
이것들은 작은 따옴표나 이중 따옴표도 아닙니다
그 대신에 두 개의 백틱입니다
이것은 여러분의 키보드에서 찾을 수 있는 특별한 기호입니다
그리고 여기 코드
끝에서 이것은 여러분이 들어보지 못하였겠으나
tagged-template 이라는 것이 있습니다
이것은 정규 자바스크립트 기능입니다
따라서 리액트나
패키지의 고유한 것이 아닙니다
여기에는 태그된 템플릿에 대해
자세히 알아보고 싶다면
MDN에 대한 링크가 첨부되어 있습니다
결국에 tagged templated은 함수 같은 것으로
여기 이 템플릿 리터럴을
입력으로 받는 것입니다
그리고 이제 이 템플릿 리터럴이
여기 div에 적용하고 싶은 모든 스타일을
포함해야 하는 것입니다
그리고 자바스크립트에서 템플릿 리터럴에 대한
좋은 점은 여러분이 문자열을 깨지 않고
다음과 같이 여러 라인의 코드를 적을 수 있다는 것입니다
이것이 추가됨으로서 이제 여러분은
제가 여기서 대체하고 싶은 div가 controls 라는 className을 가지는 것을 볼 수 있습니다
따라서 우리는
index.css file 로 돌아가서
이 div에 적용되어야 할 모든 스타일을 찾습니다
따라서 여기 클래스까지입니다
당연히 부모 요소 클래스가 있어야 하는
몇 가지의 스타일도 있으나
이에 대해서는 나중에 처리하도록 하겠습니다
지금은 그냥 div에 직접적으로
적용되어야 할 이 스타일들에만 집중하겠습니다
우리는 이 스타일들을 복사하여
여기와 같이 이 템플릿 리터럴에 붙여넣기 할 수 있습니다
그리고 여러분은 여기에
camel case notation (카멜 표기법) 같은 것들을 전혀 사용하지 않아도 됩니다
대신에 여러분은 기본적인 css 코드를 작성합니다
그리고 이 전체적인 코드가 주는 것은
이 스타일이 적용된
div를 자동적으로 반환하는
리액트 컴포넌트입니다
그리고 이것은 내부적으로 특별한 children 속성을 사용하여
다른 내용에 감싸질 수 있는
div가 될 것입니다
이를 가지고 우리는 이제
이 컴포넌트를 새로운 상수나 변수에 저장할 수 있습니다
여기서는 ControlDiv 나
이와 같은 것으로 이름 지을 수 있습니다 혹은 ControlContainer가 될 수도 있습니다
이름은 여러분에게 달렸으나
이제 스타일된 div가 될 것입니다
그리고 이제 이 커스텀 컴포넌트를
여기서 div로 대체하여 사용할 수 있습니다 여기서 여는 태그
및 하단에는 닫는 태그입니다
이렇게 하면 AuthInputs 컴포넌트 파일에
두 번째 컴포넌트가 생기게 됩니다
그리고 여러분이 원한다면
이것을 별도의 파일로 아웃소싱할 수 있습니다
그러나 일단 지금은 이 파일에서
오직 이 컴포넌트만 사용하기에 이 파일 내에 유지하겠습니다
만약 다른 컴포넌트들에서도 사용한다고 하면
분리된 파일에 보관하는 것이 더 자연스럽습니다
이제 이것을 저장합니다
그리고 재로딩하면 당연히 우리는
몇 가지의 스타일이 사라진 것을 보게 됩니다 왜냐하면
제가 여기에 이전에 적용되었던 css 클래스를 조정하는 것들을 삭제했기 때문입니다
그러나 이것을 살펴보면 우리가 볼 수 있는 것은
그리고 여기 div를 보면
여기서 우리가 전에 추가했던
스타일들이 적용되있는 것을 볼 수 있습니다
그리고 이것을 보면
어떻게 작동하는지를 보게 됩니다
여기 시스템 내부에서
이 styled-components 패키지는 단순히
고유한 css 클래스 이름을 생성하고
이게 주입되는 이 헤더 섹션의
클래스들을 위한 규칙을 정의 내립니다
그런 다음 styled-components 는 생성된 클래스를
요소에 추가합니다
여기서는 div를 사용했으므로
해당 div에 생성된 클래스가 추가됩니다 여기서 p를 사용했다면
이것은 div 대신에 paragraph가 되었을 것입니다
그러나 여기서는 div를 원합니다
이렇게 styled-components를 사용할 수 있습니다
그러나 언급한대로 이제 일부 스타일은 사라진 상태입니다
따라서 이를 고치고
styled-components에 대해 더 자세히 알아보겠습니다