2021.07.24 React styling

2021.07.24 React styling_정리노트

 

ㅎㅎㅎㅎ 오늘은 9장 정리 웃는 이유는 내가 유일..하게 재밌었던 부분이 스타일 컴포넌트였기 때문..^^ ㅎ 그냥 css 만 사용해서 그런지 몰라도 오늘은 모르는거 위주로 정리!

 

리액트 스타일링 방식

CSS

Sass

CSS Module

styled-component

 

생각보다 많이..^^ 다양하네...ㅎ..

https://korinkorin.tistory.com/48?category=974678

2021.02.04 React Style 적용,Styled Components 정리

 

여기서 기본 CSS,styled-component 쵸콤 정리했으니까 여기 없는 내용 위주로 오늘은 정리갑씨단!

 

먼저 오늘도 프로젝트 새로 생성해주겠음.

 

$ yarn create react-app styling-react
$ cd styling-react
$ yarn start

 

 

Sass ( Syntactically Awesome Style Sheet )

CSS 전처리기로 복잡한 작업을ㄹ 쉽게 할 수 있도록 해주고, 스타일 코드의 재활용성을 높여줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해준다.

단어 그대로 문법적으로 매우 멋진 스타일시트 ..! 

 

.scss .sass 의 두 가지 확장자를 지원

 

// .sass

$font-stack:Helvetica, san-serif
$primary-color : #333


body
	font: 100% $font-stack
    color : $primary-color

 

// .scss

$font-stack:Helvetica, san-serif;
$primary-color : #333;


body{
	font: 100% $font-stack
    color : $primary-color 
    }

 

이렇게 형태가 사뭇 다른데,  좀 더 자바스크립트랑 유사한 .scss 확장자를 써보자!

 

 

Sass 를 css 로 변환해주는 node-sass 라는 라이브러리를 설치해줄 예정인데, 2021년 1월 기준 해당 라이브러리의 최신 버전이 create-react-app 에서 지원되지 않아 구버전으로 설치할 것임!

 

$ yarn add node-sass@4.14.1

 

설치하고 

 

src/SassComponent.scss ( 새로 생성 )

 

// 변수 사용하기
$red: #fa5252;
$orange: #fd7e14;
$yellow: #fcc419;
$green: #40c057;
$blue: #339af0;
$indigo: #5c7cfa;
$violet: #7950fc;
// 믹스인 : 재사용되는 스타일 블록을 함수처럼 사용할 수 있음.
@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}
.SassComponent {
  display: flex;

  .box {
    background: red; // 일반 CSS 에선 .SassComponent .box 와 마찬가지
    cursor: pointer;
    transition: all 0.3s ease-in;
    &.red {
      // .red 클래스가 .box 와 함께 사용 됐을 때
      background: $red;
      @include square(1);
    }
    &.orange {
      background: $orange;
      @include square(2);
    }
    &.yellow {
      background: $yellow;
      @include square(3);
    }
    &.green {
      background: $green;
      @include square(4);
    }
    &.blue {
      background: $blue;
      @include square(5);
    }
    &.indigo {
      background: $indigo;
      @include square(6);
    }
    &.violet {
      background: $violet;
      @include square(7);
    }
    &:hover {
      // .box 에 마우스 올렸을 때
      background: black;
    }
  }
}

 

이렇게 생성해주고, 

 

src/SassComponent.js ( 새로 생성 )

 

import React from "react";
// scss import
import "./Sasscomponent.scss";

const SassComponent = () => {
  return (
    <div className="SassComponent">
      <div className="box red" />
      <div className="box orange" />
      <div className="box yellow" />
      <div className="box green" />
      <div className="box blue" />
      <div className="box indigo" />
      <div className="box violet" />
    </div>
  );
};

export default SassComponent;

 

이렇게 컴포넌트도 생성해주자.

 

 

마지막으로 App 에서 불러오기!

 

src/App

 

 

Sass 는 작업한 후 개발 서버를 재시작해야 적용된다. 다시 yarn start!

오오 이쁘댠.. 잘 적용이 되는 모습..!! 까만 호버도 잘 적용된다! ㅎ

 

이렇게 적은 Sass 변수 및 믹스인은 다른 파일로 따로 불니하여 작성한 뒤 필요한 곳에서 쉽게 불러와 사용할 수 있음.

 

 

 

 

분리를 시켜주기 위해 src 에 styles 라는 폴더를 만들고 util.scss 파일 생성!

 

src/styles/util.scss ( 새로 생성 )

 

이렇게 변수와 믹스인을 잘라서 가지고 왔다. 

 

 

Sasscomopnent에서 불러와보자.

 

 

 

 

이렇게 @import 로 불러올 수 있음! 결과도 당연히 같움.

 

 

 

Sass 장점 중 하나는 라이브러리를 쉽게 사용할 수 있다는 점이다. 

 

@import '../../../node_modules/library/styles' ;

 

기본적으로 node_modules 까지 들어가서 사용하는 방법이 있지만, 

 

@import '~library/styles';

 

이렇게 물결 ( ~ ) 을 사용하면 자동으로 node_modules 에서 라이브러리 디렉토리로 들어가서 스타일을 불러올 수 있다! 

 

한번 쓰윽 써보자

 

$ yarn add open-color include-media

 

open-color 

색상 팔레트 라이브러리

include-media 

반응형 디자인 라이브러리

 

 

두개 같이 설치 꼬고

 

 

src/styles/utill.scss

 

설치해주고 이렇게 불러와서 

 

 

 

src/Sasscomponent.scss

 

해당 부분 추가!

 

 

 

 

 

 

개발자 도구를 이용해서 찍어보면, 768 이하인 화면에서는 배경이 검은색으로 변한다! 굿...

 

 

---

 

 

CSSModule

CSS 를 불러와서 사용할 때 클래스 이름을 고유한 값,  [파일이름]_[클래스이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일에서 클래스 이름이 중첩되는 현상을 방지하는 기술.

v2 버전부터는 .module.css 확장자로 파일을 저장하면, 별도의 설치가 필요없다.

 

 

src/CSSModule.module.css ( 새로 생성 )

 

 

 

이렇게 작성할 수 있는데, CSS Module 을 사용하면 클래스 이름을 지을 때 고유성에 대해 고민하지 않아도 된다. 해당 클래스는 우리가 방금 만든 스타일을 직접 불러온 컴포넌트의 내부에서만 작동하기 때문!!!!

만약 CSS Module 안에 전역적으로 사용하고 싶은 css 가 있다면, 앞에 :global 만 적어주면 되는 것이다

 

 

src/CSSModule.js ( 새로 생성 )

 

 

이제 해당 컴포넌트를 만들어주고 불러와주면 되는데, 객체를 전달받는다는게 뭔 말인가 해서 styles 를 찍어보았음.

 

 

 

 

아아 아까 말한 형태대로,  [파일이름]_[클래스이름]__[해시값] 이 객체의 형태로 전달된다는 말이균.

 

그러면 객체니까 JSX 에서 {styles.클래스이름} 이렇게 받아올 수 있는거다!

something 은 전역적으로 생성해주었으니까 그냥 문자열로 넣어주어도 적용된다.

 

 

하이하이 잘 적용이 되는군

 

 

 

만약 두 개를 적용하고 싶다면 ? 

 

 

 

이렇게 템플릿 리터럴 방식을로 적으면 된다. 만약 이 문법을 사용하지 않으면 해당 위의 주석처럼 join을 이용!

 

템플릿 리터럴

ES6 신문법으로 해당 문법을 사용하면 문자열 안에 자바스크립트 레퍼런스를 쉽게 넣어줄 수 있다.

 

const name = 'react';
// const message = '제 이름은'+name + '입니다' ; 
const message = `제 이름은 +${name} + 입니다` ;

 

여기서 사용되는 `` 요 문자는 백틱이라고 하고, 1 옆에 있는 키인데 그냥 원화 표시라면 알트누르고 ( 맥북은 옵션 ) 하면 백틱 나옴 ㅇㅇ!

 

요롷게 새로운 스타일도 잘 적용되었슴다

 

 

CSS 클래스를 조건부로 설정할 때 또 유용한 라이브러리 하나!

$ yarn add classnames

 

설치 ㄲㄲ

 

import classNames from 'classnames';


classNames('one','two') ;
>>'one two'

classNames('one',{'two' :true });
>>'one two'

classNames('one',{'two' :false }); 
>>'one'

classNames('one',['two' ,'three']);
>> 'one two three'



const myClass = 'hello';
classNames('one',myClass,{myCondition:true}); 
>> 'one hello myCondition'



// highlighted true 면 highlighted 클래스 적용, false 면 적용 안됨. 
//theme 전달받는 문자열은 내용 그대로 클래스에 적용

const myComponet = ({highlighted, theme}) =>(
	<div className={classNames('myComponent',{highlighted },theme)}>Hello</div>

);

 

이렇게 예시로 적어봤고, 여러 종류의 파라미터를 조합해서 css 클래스를 설정할 수 있기 때문에 props 값에 따라 정해주기 겁나 쉽겠규만.

 

 

src/CSSModule

 

이렇게 주석이랑 비교하면서 보면 될 듯하다! 점점 가독성이 좋아지고 있는게 보이는균 ㅎㅅㅎ

 

 

마지막으로 Scss 랑 css 같이 적용하기!

 

 

src/CSSModule.module.css >> src/CSSModule.module.scss ( css >> scss 로 변경 )

 

 

주석도 자바스크립트껄로 바꼈단 ㅎㅅㅎ 이렇게 적고, 

 

 

src/CSSModules 

여기도 고쳐주면 똑같은 화면 완성~~

 

 

굿굿 

 

 

참고로 일반 .css / .scss 파일에서도 :local 을 적어주고 사용하면, CSS Module 사용 가능!

 

 

 

---

 

 

styled-component

CSS-in-JS (자바스크립트 파일 안에 스타일을 선언하는 방식) 중 개발자들이 가장 선호하는 라이브러리 

 

$ yarn add styled-components

 

자 설치하고,

 

https://korinkorin.tistory.com/48?category=974678 

2021.02.04 React Style 적용,Styled Components 정리

 

예전에 적었던 글은 너무 조약하길래 보충해서 적어야겠단

 

 

// styled import 
import styled from 'styled-components';


// styled.태그명 으로 사용
const MyComponent = styled.div`
	font-size:2rem;
`

// 태그의 타입을 styled 함수의 인자로 전달
const MyInput = styled('input')`
	bacground:gray;
`



//아예 컴포넌트 형식의 값을 넣어줌

cosnt StyledLink = styled(Link)`
 color:blue;
`

 

음음 간단하게 형태 정리를 해보았다 styled.태그명 형태 기본으로 하면서 유동적인 태그명이나 특정 컴포넌트 자체에 스타일링을 해주고 싶으면 styled 함수에 직접 넣어주면 된다!

 

 

자 이제 본격적으로 해볼까나

 

 

src/StyledComponent.js ( 새로 생성 )

import React from "react";
// styled,css import
import styled, { css } from "styled-components";

const Box = styled.div`
  /* props 로 넣어준 값 직접 전달 가능 */
  background: ${(props) => props.color || "blue"};
  padding: 1rem;
  display: flex;
  width: 1024px;
  margin: 0 auto;
`;

const Button = styled.button`
  background: white;
  color: black;
  border-radius: 4px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 600;

  /* & 문자를 사용하여 Sass 처럼 자기 자신 선택 가능 */
  &:hover {
    background: rgba(255, 255, 255, 0.9);
  }

  /* 다음 코드는 inverted 값이 true 일 때 특정 스타일을 설정함.*/
  ${(props) =>
    props.inverted &&
    css`
      background: none;
      border: 2px solid white;
      color: white;
      &:hover {
        background: white;
        color: black;
      }
    `};
     /* 버튼과 버튼이 맞닿아 있는 부분 margin-left */
  & + button {
    margin-left: 1rem;
  }
`;

const StyledComponent = () => (
    // props 로 color 값 전달. 기본은 위에서 설정해준 blue
  <Box color="black">
    <Button>안녕하세요</Button>
    <Button inverted={true}>테두리만</Button>
  </Box>
);

export default StyledComponent;

 

 

위 포스팅에 적었지만, 백틱을 사용해서 쓰는 형태이고, 가장 큰 장점 중 하나는 역시 props 값으로 전달해 주는 값을 쉽게 스타일에 적용할 수 있다는 점!!!

 

 

 

 

해당 컴포넌트가 잘 뜬다면 성공쓰~

 

몇 가지의 원리를 좀 더 파보자!!

 

 Tagged Template Literal 문법

그 때는 잠시 props 를 해당 문법 때문에 쓸 수 있다고 했는데, 자세히 보면, 일반 템플릿 리터럴 문법과는 다르게 Tagged Template Literal 문법은 템플릿 사이사이에 들어가는 자바스크립트 객체나 함수의 원본 값을 그대로 추출할 수 있다. 

 

 

 

예를 들면, 

 

 

이렇게 객체나 함수를 템플릿에 넣게 되면, 형태를 잃어서 [objevt Object] 로, 함수는 문자열로 인식 되어서 나오는데, 

 

이렇게 함수를 작성하고 나서 해당 함수 뒤에 템플릿 리터럴을 사용하면 ? 

 

요롷게 온전히 값을 추출할 수 있다! 그래서 스타일 컴포넌트에서는 이러한 속성을 사용해서 props 를 쉽게 조회할 수 있도록 하는 것!!

 

 

 

이 부분도 역시 props 를 이용해 조건부로 true 이면 해당 스타일이 적용되도록 한 모습!!

 

 

그럼 반응형 디자인할 때는 ..?

 

 

물론 css 처럼 적어주어도 되지만, 

 

https://www.styled-components.com/docs/advanced#media-templates

styled-components: Advanced Usage

 

스타일 컴포넌트에 있는 유틸 함수를 써서 

 

 

 

훨씬 간편하게 쓸 수 있다..! 모듈화해서 이 역시 분리해주고 import 해오면 다 쓸 수 있겠디 !!!!!!!

역시 스타일 컴포넌트..ㅎㅅㅎ 

 

 

+++ 새로 추가(2022.04.11)

 

다시 보고 있으니 새롭군 ...음음... 스타일 컴포넌트에서는 태그를 또 지정해줄 수 있는 속성이 있음. 

예를 들어 div 태그의 스타일은 같은데 나는 이 스타일 대로 span 태그를 만들고 싶다면 ?

 

const Btn = styled.button`
  color: white;
  background-color: plum;
  border: 0;
  border-radius: 15px;
  width:100px;
  height:40px;
  margin-top:10px;
`;



function App() {
  return (
    <>
      <Btn>Login</Btn>
      // as props is property of this tag
      <Btn as="span">Login</Btn>
    </>
  );
}

 

as props 를 써주면 된다!

이렇게 하면 버튼으로 만들었던 스타일 컴포넌트가

이렇게 span 으로 바뀌는 것을 볼 수 있음!!! 와..이건 또 몰랐네 체고야~~~

 

 

또한, 컴포넌트를 재사용할 때, 속성을 똑같이 반복하고 싶다면?

const Input = styled.input.attrs({ required: true})`
  background-color: cyan;
`

function App() {
  return (
    <>
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
    </>
  );
}

이렇게 attrs 속성을 이용하면 ?

 

 

이렇게 한번에 속성들을 다 부여해서 재사용 할 수 있다는 사실! 알면 알수록 최고인 친구야.. 잘 쓰진 않지만 역시 유용할 수 있으니 이렇게 추가로 한~~~참 뒤에라도 추가한다.

 

---

 

 

오늘은 그래도 나름..? 리액트 중에서 제일 흥미가 있었던 부분이어서 즐겁게는 했지만 세삼 또 이해못하고 쓴게 있었다는 것에 놀라며...ㅎㅅㅎ 

그리고 나는 절대 스타일 컴포넌트를 슬기롭게 쓰지 못했다는 사실을.. 깨달았다.. 이렇게나 유용한 기능이었다니 재미도 있지만 역시 더 공부해서 요모조모로 잘 쓸 수 있도록 해야겠다 히히 오늘은 기분 좋게 새벽 포스팅까지해서 1일 반..? ㅋㅋㅋㅋ만에 2개 포스팅 성공쓰~ 

이제 자러가야지 빠잇