20220419

권도토잠보·2022년 4월 19일
0

새로운세계

목록 보기
51/69
post-thumbnail

REACT 폐관수련ing

서타일드 캄포난트... 그것은 도덕책

서타일드 컴포난트
개인적으로 이 프레임워크를 잘 활용하고 싶다고 하시는분에게
필히 CSS를 좀 만지작하시는게 좋다는 의견을 강하게 어필하고 싶습니다
왜냐면 걍 다른 형태로 CSS 작성 하는거니깐요 👀

CSS 대신 서타일트 캄포난트라니요 !?

자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS 의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크입니다 ! 라고하네요

🤷‍♂️ 서타일트 컴포넌트는 왜써야하는걸까요 ?

먼저 인용한블로그는 이곳임을 밝힙니다

  1. 자유로운 CSS 커스텀 컴포넌트를 만들 수 있습니다.
    👉 styled-components 를 사용하면 사용자 인터페이스 디자인 포커스는 HTML 요소 또는 React 컴포넌트가 className 을 가진 것 처럼 자체 스타일을 포함하고 전체 프로젝트에서 쉽게 재사용 할 수 있는 styled-component 로 전환됩니다.
  2. 인라인 스타일링
    👉 styled-components는 DOM 위에 스타일 태그를 부착하고 인라인 스타일은 DOM 노드의 속성과 함께 작동하는 방식입니다
  3. 모바일 지원
  4. 스타일 스코프
  5. No-class policy
    👉 styled-components 는 class 에서 props 를 사용하기를 주장합니다. no-class policy 는 더 많은 개발자가 컴포넌트의 동작을 제어하는 것에 대한 모범으로 이끌고 있습니다.
  6. 서버 사이드 렌더링
    👉 Styled-components 는 서버 사이드 렌더링을 지원합니다. 기본 아이디어는 서버에서 앱을 렌더링 할 때마다 ServerStyleSheet 컨텍스트 API를 통해 스타일을 허용하는 공급자를 생성하고 반응 트리에 추가 할 수 있다는 것입니다. 이것은 키 프레임과 같은 전역 스타일을 방해하지 않으며 createGlobalStyle React DOM의 다양한 SSR API와 함께 스타일 구성 요소를 사용할 수 있습니다.
    7.CSS 테스팅
    👉 Styled-components 도 실제 컴포넌트이기 때문에 단위 테스트를 수행할 수 있습니다. 이는 CSS 에서 중요한 부분으로 Styled-components 팀이 이미 지원하고 있습니다. Jest Styled Components 는 Styled-Components 를 Jest 로 테스팅할 수 있습니다. 이 패키지는 스냅 샷 테스트 경험을 향상시키고 스타일 규칙을 기대할 수있는 새로운 matcher 를 제공합니다. 다음과 같이 설치할 수 있습니다.

등등 더 이유가 많지만 이정도에서 줄이겠어요.
🤷‍♂️ 아니 왜 말하다가 끊어요 ?
🙎‍♂️ 내맴. 궁금하면 구글링하셈 뽀큐

심플하게 ! 서타일드 캄포난트 쓰는 법(칙)

다시 한 번 강조를 드리자면.... CSS기초지식조차 없다면 CSS부터...!

더 이상의 설명은 거절한다

오늘의 일기

CSS는 어느정도(기초지만)하지만 깐부님께서 연결해주신 (현)멋진 개발자님 말씀이..
Styled-Component는 프론트엔드 개발자가 되려면 필수라고 생각합니다 라고 하셔서
이번 프로젝트에서는 롸롸.css 파일은 웬만하면 생성하지 않는 방향으로
기능구현 및 코드작성을 해 볼 생각이다 !

다시 한 번 느끼지만 우리팀에서 나만 잘하면 된다 정말루 🥺


Sae Eleisa Tera Vi

profile
낯선이여, 당도하였으면 당도높은 복숭아

0개의 댓글