스타일링 된 구성 요소를 사용하여 Unsplash를 재 설계하는 방법

미래의 안전한 CSS : 스타일 구성 요소가있는 반응 스타일을 단순화하십시오 미래를위한 안전한 CSS를 작성하는 것은 어려운 일입니다. 수천 줄의 CSS 코드를 작성하고 유지 해야하는 경우 클래스 이름, 특이성 문제 등이 충돌합니다. 위의 문제를 해결하기 위해 스타일링 된 구성 요소가 시작되었습니다.

스타일의 구성 요소를 사용하면 JS에서 CSS를 쉽게 작성할 수 있으며 클래스 이름 충돌 또는 특이성 문제가없는 동시에 다른 많은 장점이 있습니다. 이것은 CSS를 쓰는 것을 치료합니다.

이 튜토리얼은 JS, 스타일 구성 요소의 장단점 인 CSS의 내용을 탐색하고 마지막으로 스타일 구성 요소를 사용하여 unsplash를 리팩터링합니다. 이 튜토리얼을 완료 한 후에는 신속하게 시작하여 스타일 구성 요소를 사용할 수 있어야합니다.

참고 : 스타일 구성 요소는 React를 위해 특별히 설계되었으므로 React를 사용하여 스타일의 구성 요소를 사용해야합니다. 주요 이익 :

JS에서 CSS의 기본 사항과 CSS가 JavaScript로 직접 작성하여 클래스 이름 충돌 및 특이성 문제와 같은 일반적인 문제를 피함으로써 스타일의 구성 요소가 프로세스를 단순화하는 방법을 배우십시오.

필요한 설치 및 초기 구성 단계를 포함하여 React 프로젝트에서 스타일링 된 구성 요소를 사용하여 설정하는 방법을 알아보십시오.

중요한 CSS의 자동 주입, 더 작은 CSS 패키지 및 React 애플리케이션을위한 쉬운 테마와 같은 스타일 구성 요소의 이점을 살펴 봅니다.

React Applications에서 동적 테마를 만들고 글로벌 스타일을 관리하여 스타일 구성 요소의 실제 적용을 발견하십시오.

더 쉬운 코드 관리 및 사용하지 않는 CSS를 효율적으로 제거 할 수있는 능력을 포함하여 스타일 구성 요소의 유지 보수 이점을 배우십시오. 각 단계에 대한 자세한 코드 예제 및 지침이 포함 된 스타일 구성 요소를 사용하여 Unsplash 인터페이스를 리팩토링하려면 포괄적 인 안내서를 따라 가십시오.

전제 조건 :

이 튜토리얼을 사용하려면 React의 기본 사항이 있어야합니다. 이 튜토리얼에서는 원사를 사용합니다. 원사를 설치하지 않은 경우 여기에서 설치하십시오.

우리가 일관된 방식으로 보장하기 위해이 자습서에 사용 된 버전은 다음과 같습니다.

<..> 노드 12.6.0 npx 6.4.1 원사 1.17.3 CSS의 진화 :
• JS에서 CSS를 작성하기 전에 웹 응용 프로그램을 스타일링하는 가장 일반적인 방법은 별도의 파일로 CSS를 작성하고 HTML에서 연결하는 것입니다.
그러나 이것은 대규모 팀에서 문제를 일으켰습니다. 모든 사람은 자신의 CSS를 작성하는 방법이 있습니다. 이것은 특이성 문제로 이어지고 모든 사람이 를 사용하게합니다. 그런 다음 Sass가 나타났습니다. SASS는 CSS의 확장으로 변수, 중첩 규칙, 인라인 수입 등을 사용할 수 있습니다. 또한 물건을 정리하는 데 도움이되고 스타일 시트를 더 빨리 만들 수 있습니다.
• SASS는 CSS보다 더 나은 것으로 간주 될 수 있지만 일부 시스템이없는 혜택보다 더 많은 피해를 입을 수 있습니다.

  나중에 Bem이 나타났습니다. BEM은 고유 한 클래스 이름을 작성하여 특이성 문제를 줄일 수있는 방법입니다. BEM은 특이성 문제를 해결하지만 HTML을 더욱 장점으로 만듭니다. 클래스 이름은 불필요한 길이가 될 수 있으며, 거대한 웹 응용 프로그램이 있으면 고유 한 클래스 이름을 생각해 내기가 어렵습니다.

  후 CSS 모듈이 탄생했습니다. CSS 모듈은 SASS 나 BEM이 개발자가 제공 한 이름에 의존하기보다는 도구로 고유 한 클래스 이름의 문제인 문제를 해결할 수없는 문제를 해결함으로써 특이성 문제를 해결합니다. CSS 모듈은 React 생태계에서 엄청난 인기를 얻었으며 Glamor와 같은 프로젝트의 길을 열었습니다.

  이 모든 새로운 솔루션의 유일한 문제는 개발자가 새로운 구문을 배워야한다는 것입니다. JS의 .CSS 파일에 CSS를 작성하는 방식에 CSS를 정확히 쓸 수 있다면 어떨까요? 스타일의 구성 요소가 탄생했습니다.

  스타일 구성 요소는 ES6 기능인 템플릿 리터럴을 사용합니다. 템플릿 리터럴은 표현식을 내장 할 수있는 문자열 문자입니다. 그들은 멀티 라인 문자열과 문자열 보간 함수를 사용할 수 있습니다.

  스타일 구성 요소의 주요 판매 지점은 JS에서 정확한 CS를 쓸 수 있다는 것입니다.

  스타일의 구성 요소에는 많은 장점이 있습니다. 다음은 스타일 구성 요소의 장단점 중 일부입니다.
  pros 스타일 구성 요소를 사용하면 많은 장점이 있습니다.

  키 CSS를 DOM 에 주입하십시오 스타일의 구성 요소는 페이지에 중요한 CSS 만 주입합니다. 즉, 사용자는 특정 페이지에 필요한 CSS 만 다운로드하는 것이 아니라 다른 것이 아닙니다. 이로 인해 웹 페이지가 더 빨리로드됩니다.

  각 페이지의 CSS 패키지는 더 작습니다 페이지의 구성 요소에 사용 된 스타일 만 주입하기 때문에 패키지 크기는 훨씬 작습니다. 너무 많은 스타일 시트, 정규화 된 프로그램, 반응 형 디자인 등 대신 필요한 CSS를로드하면됩니다.

  자동 공급 업체 접두사 스타일 구성 요소를 사용하면 최신 표준을 기반으로 공급 업체 접두사를 자동으로 추가하는 CSS를 작성할 수 있습니다.

  1. 사용하지 않은 CSS 삭제 스타일이 구성 요소와 같은 위치에 있기 때문에 스타일 구성 요소를 사용하여 사용하지 않은 CSS 또는 유효하지 않은 코드를 제거하는 것이 더 쉽습니다. 이것은 또한 패키지 크기 감소에도 영향을 미칩니다.

  테마는 쉬운 입니다 스타일의 구성 요소는 React 응용 프로그램을위한 테마를 매우 쉽게 설정합니다. 앱에 여러 가지 테마를 가질 수 있으며 여전히 쉽게 유지할 수 있습니다.

  http 요청 의 수를 줄입니다 재설정, 정규화 및 반응 형 디자인을위한 CSS 파일이 없기 때문에 HTTP 요청 수가 크게 줄어 듭니다.

• 고유 클래스 이름 스타일의 구성 요소는 빌드 단계가 발생할 때마다 고유 클래스 이름을 생성합니다. 이것은 명명 충돌 또는 특이성 문제를 피합니다. 글로벌 갈등은 더 이상 필요하지 않으며

  태그를 사용하여 해결해야합니다.

유지하기 쉬운
• 스타일의 구성 요소를 사용하면 스타일을 구성 요소와 함께 넣을 수 있습니다. 이렇게하면 유지 보수가 쉽습니다. 대형 CSS 파일과 달리 구성 요소에 영향을 미치는 스타일을 정확히 알 수 있습니다.

단점 물론 완벽한 것은 없습니다. 스타일의 구성 요소와 관련된 몇 가지 단점을 살펴 보겠습니다.

캐시 스타일 시트를 사용할 수 없습니다 일반적으로 사용자가 웹 사이트를 방문하면 웹 브라우저가 .CSS 파일을 캐시하여 다음에 액세스 할 때 동일한 .CSS 파일을 다시 다운로드 할 필요가 없습니다. 그러나 스타일의 구성 요소의 경우 태그를 사용하여 스타일이 DOM에로드됩니다. 따라서 캐시를받을 수 없으며 사용자가 웹 사이트를 방문 할 때마다 스타일을 요청해야합니다.

1. 반응 만

   스타일 구성 요소는 React 용으로 설계되었습니다. 따라서 반응 특이 적입니다. 다른 프레임 워크를 사용하는 경우 스타일 구성 요소를 사용할 수 없습니다.

   그러나 그러나 틀이없는 감정이라고 불리는 스타일의 경쟁자와 매우 유사한 대안이 있습니다.

   <style></style>

실용적 작동 :
2. 이제 우리는 스타일의 구성 요소의 장단점을 알았으므로 시작하겠습니다.

   Create-React-App을 사용하여 새로운 React 프로젝트를 만듭니다. 이를 만들려면 NPX를 사용하여 글로벌 네임 스페이스를 오염시키지 않고도 패키지를 일시적으로 다운로드하고 실행할 수 있습니다.

   터미널에 다음을 입력하십시오

   그런 다음

   디렉토리로 이동 하여이 튜토리얼에 필요한 다음 패키지, 즉 스타일 컴포넌트 및 반응-메드-이미지 Zoom :

   를 설치하십시오.

패키지를 사용하면 JS로 실제 CSS를 쓸 수 있으며 패키지를 사용하면 중간 스타일의 이미지를 축소 할 수 있습니다.
이제 설치가 완료된 후 , , 및 와 같은 디렉토리에서 원치 않는 파일을 삭제하십시오. 삭제

삭제는 더 이상 필요하지 않기 때문입니다.

의 내용을 다음과 같이 바꿉니다

이제 터미널에서 를 입력하여 개발 서버를 실행해보십시오.

아래 그림과 같이 화면이 인쇄되는 것을 볼 수 있습니다.

<code class="language-bash">$ npx create-react-app unsplash-styled-components</code>

스타일 구성 요소는 스타일 구성 요소에 태그 템플릿 리터럴을 사용합니다. unsplash-styled-components 스타일 구성 요소를 사용하여 분홍색 배경에서 H1을 흰색 텍스트로 설정한다고 가정 해 봅시다. 이 작업을 수행 할 수있는 방법은 다음과 같습니다.

<code class="language-bash">$ cd unsplash-styled-components
$ yarn add styled-components react-medium-image-zoom</code>

이제 다음과 같이 보일 것입니다

styled-components 우리는 방금 첫 번째 스타일 구성 요소를 만들었습니다. 구성 요소는 에 할당됩니다.

의 기본 내보내기에는 , , Header, , 등과 같은 기본 HTML 프리미티브가 있습니다. Header styled.h1 in , 우리는 실제 CSS를 씁니다. 스타일 객체를 만드는 대신 CSS를 작성하고 있습니다. styled-components 또한 구성 요소는 브라우저에서 H1 태그와 고유 클래스 이름으로 교체됩니다. 동일한 고유 클래스 이름의 스타일 태그가 DOM에 삽입됩니다. 이것이 스타일의 구성 요소가 실제로 작동하는 방식입니다. styled 우리의 스타일은 구성 요소와 같은 파일에 있습니다. 이것은 우리의 구성 요소가 스타일과 같은 위치에 있음을 의미합니다. 따라서 특정 구성 요소와 관련된 스타일을 제거하는 것이 더 쉬워서 유효하지 않은 코드를 제거합니다. div 전통적으로, 특정 요소에 대한 클래스 이름 또는 ID 또는 특정 선택기를 찾은 다음 하나씩 삭제해야하기 때문에 CSS에서 추론하기가 어렵습니다. 소규모 프로젝트에서는 쉽지만 프로젝트의 복잡성이 증가함에 따라 어려워 질 수 있습니다. 스타일의 구성 요소를 사용하면 프로젝트가 얼마나 복잡하든 구성 요소와 동일한 위치에 있기 때문에 스타일을 추가, 편집 및 삭제하는 것이 더 쉽습니다. span h1 (공간 제한으로 인해 다음 단계는 나머지 부분에 대한 코드 및 스크린 샷 설명이 여기에서 생략되지만 논리 구조는 원본 텍스트와 일치합니다. 나머지 부분에 대한 자습서를 계속 작성하십시오. 원래 텍스트에 따르면) h2

결론 : styled.h1 스타일의 구성 요소를 사용하면 JS에 일반 CS를 쉽게 작성할 수 있습니다. 스타일을 구성 요소와 함께 넣어 스타일을 쉽게 추가, 편집 또는 삭제할 수 있습니다.

우리는 글로벌 스타일을 추가하는 방법,

속성을 ​​사용하여 재사용 스타일 및 응용 프로그램의 테마를 설정하는 방법을 배웠습니다. 우리는 스타일의 구성 요소의 표면에만 접촉했습니다. 공식 웹 사이트에서 자세히 알아볼 수 있습니다. Header 마지막으로, 우리는 스타일링 된 구성 요소를 사용하여 Unsplash를 리팩토링했습니다. 완전한 코드는 github :

github link

에서 찾을 수 있으며 데모는

에서 볼 수 있습니다.

스타일 구성 요소 사용에 대한 FAQS :

(원본 텍스트에 나열된 FAQ는 길이가 너무 길기 때문에 여기서 생략되지만 FAQ 부품을 유지하고 원본 텍스트를 기반으로 답변을 채우는 것이 좋습니다.) >

위 내용은 스타일링 된 구성 요소를 사용하여 Unsplash를 재 설계하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!