스타일이 지정된 구성 요소

스타일 구성요소란 무엇입니까?

스타일 구성요소는 자바스크립트로 CSS를 작성할 수 있게 해주는 정말 멋진 라이브러리입니다. 파일 간에 전환할 필요 없이 일반 계단식 스타일 시트에서 수행할 수 있는 거의 모든 작업을 수행할 수 있습니다. 구성 요소와 스타일 간의 매핑이 더 이상 필요하지 않습니다. 스타일을 정의할 때 실제로는 스타일이 첨부된 일반 React 구성 요소를 만드는 것입니다.

스타일이 지정된 구성 요소 설정

먼저 반응 앱을 만들어야 합니다...
콘솔에 다음 코드를 입력하십시오.
모든 소문자를 사용하는 한 원하는 대로 파일을 호출할 수 있습니다.

$ create-react-app your file name 

이제 대 코드에서 파일을 엽니다. 그런 다음 터미널에 다음을 입력하여 Styled Components 라이브러리를 추가하십시오.

$ npm install styled-components

이제 이 매우 재미있는 라이브러리를 사용할 준비가 되었습니다.
CSS에서 구문 강조 표시를 원하면 vscode-styled-components라는 vscode 확장을 설치할 수 있습니다.

스타일 구성 요소를 사용하는 이유는 무엇입니까?

사람들은 여러 가지 이유로 Styled Components를 사용합니다. 원래 반응이 있을 때 사람들은 자신의 스타일을 소품으로 전달했습니다.
Styled Components를 사용하면 동일한 구성 요소 내에서 모든 파일을 정의할 수 있으며, 이를 prop으로 전달할 필요가 없으며 동적으로 업데이트할 수 있습니다.
다음은 스타일링 구성 요소를 사용하기 좋게 만드는 몇 가지 특전입니다.
리액트 네이티브를 위한 손쉬운 스타일링.
타사 스타일 지정과의 충돌을 피할 수 있습니다.
서버 측 렌더링이 준비되어 있습니다.
타이프 스크립트 준비.
스타일이 지정된 기존 구성 요소를 쉽게 확장할 수 있습니다.
많은 브라우저 지원 및 문서.

Styled Components는 정말 주목할만한 일부 회사에서도 사용되며 요즘에는 매우 고용할 수 있는 기술입니다.

스타일 구성 요소 사용...

이 블로그에서는 스타일 구성 요소로 할 수 있는 몇 가지 멋진 작업을 살펴보겠습니다. 구성 요소 설정부터 시작하겠습니다.
가져오기가 반응하는 코드 근처에 "import styled-components"를 추가하십시오.



여기에 className이 "App"인 div가 있는 일반적인 반응 구성 요소가 있습니다. 제목에 h1을 추가했습니다.
이제 요소를 생성하고 h1 및 버튼 요소를 생성할 수 있습니다. 이를 위해 원하는 모든 html 요소를 사용할 수 있습니다. 구문은 다음과 같습니다. 먼저 새 요소를 선언하고 변수에 저장한 다음 태그가 지정된 템플릿 리터럴을 시작하고 함수를 호출한 다음 템플릿 문자열로 인수를 전달합니다. 이 템플릿 리터럴 내부에는 해당 요소의 스타일을 나열할 수 있습니다. 이를 위해 기본 CSS처럼 보이는 것을 사용합니다. 일반 CSS를 사용하여 할 수 있는 모든 작업을 수행할 수 있습니다.



다음으로 요소를 렌더링해야 합니다. 선택한 요소 태그에 래핑하고 페이지에 렌더링합니다. 대문자로 시작하고 위에서 지정한 변수 이름과 일치해야 합니다.

후크 사용...

코드를 동적으로 업데이트하기 위해 후크를 가져올 수도 있습니다.
이렇게 하려면 import React from "react"태그 옆에 { useState }를 추가합니다.

그런 다음 상태를 설정합니다. 사용 상태를 호출하고 부울 값을 false로 설정합니다.
a 태그로 이동하고 기본을 소품으로 설정합니다. onlclick 핸들러를 정의한 다음 set primary를 호출하고 현재 상태의 반전을 호출하는 배열 함수를 설정합니다. 이제 onclick에 반응하는 요소가 생겼습니다.



지금까지 스타일이 지정된 구성 요소와 구성 요소가 수행할 수 있는 작업에 대해 간단히 살펴보았습니다. 꼭 방문해보세요https://styled-components.com/docs
자세히 알아보기

자원: https://styled-components.com/docs