React. Style

React. Style

◎ Inline Style CSS

클래스 또는 컴포넌트형 함수에서 Object 형식으로 만들어서 사용

render() {
          const testStyle={
              width      : "100px"
            , height     : "100px"
            , background : "red"
		  }
          return (
              <div style={testStyle}></div>
          );
}
//---------------------------------------------------------
<div style={{
              display :'inline-block'
            , width   :'100px'
            , height  :'100px'
}}></div>

◎ Import Style CSS

<link rel= ...  →  import 방식

// webpack.config.dev.js (없다면 npm run eject)
loader: require.resolve('css-loader'),
options: {
          importLoaders : 1,
          // import시 modules 지정 
          modules : true,
},
//---------------------------------------------------------
import styles from './App.css';

<div className={styles.test} ></div>

◎ Bootstrap 적용

1. npm install react-bootstrap bootstrap

2. index.html / CSS Link : https://getbootstrap.com/docs/5.1/getting-started/introduction/

3. App.js : import { Navbar,Button...사용 컴포넌트 기입 } from 'react-bootstrap';

◎ styled-components

• component가 많아지면 class의 명칭이 겹치는 문제를 예방할 수 있다.

• 확장 스타일링을 사용하면 중복된 코드 양을 줄이고, 분산된 스타일을 일관적으로 관리 할 수 있다.

• style component는 가독성 저하를 일으킬 수 있다고 생각한다.

yarn add styled-components

import styled from 'styled-components';

// style component 생성
let Box = styled.div`
    padding : 20px;
`;
let Title = styled.h4`
    font-size : 25px;
    color : ${ props => props.color }
`;

// component 사용
<Box>
  <Title color={'red'}></Title>
</Box>

// 위와 같이 component의 props를 전달받아 사용하는 것이 가능하다.
// (조건부 스타일링)

◎ SASS

• sass는 css의 전처리로 css로 컴파일되는 스크립트 언어이다.

• css를 보다 프로그래밍언어스럽게 작성가능한 preprocessor

/* 설치 */
yarn add node-sass
/* M1 Mac 에서는 yarn add sass */

/* 확장자명 변경 */
file.css → file.scss

/* 외부파일 임포트*/
@import  'root';

/* 변수 선언 */
$maincolor : #ff0000;

/* 변수 사용 */
.red {
    color : $maincolor;
}

/* nesting */
div.box h4 {
    color : black;
}
div.box p {
    color : red;
}
/* ↓↓↓ */
div.box {
    h4 {
        color : black;
    }
    p {
        color : red;
    }
}

/* @mixin / @include */
/* 함수 생성 */
@mixin fnc(){
    color: black;
}

/* 함수 사용 및 상속 */
.my-alert-red {
    @extend .my-alert;
    background: red;
    @include fnc()
}
/* @mixin → @include */

◎ Animations

• react-transition-group 사용

• 컴포넌트에 transition 효과를 쉽게 줄 수 있는 공식 라이브러리

• 컴포넌트가 appear, enter, exit될 때 원하는 효과를 넣을 수 있다.

yarn add react-transition-group

import {CSSTransition} from "react-transition-group";

• 서서히 등장하는 애니매이션 예시

<CSSTransition in={스위치(true/false)} classNames="boxAni" timeout={500}>
  <TabContent />
</CSSTransition>

/* .scss file */
.boxAni-enter {
    opacity: 0;
}
.boxAni-enter-active {
    opacity: 1;
    transition: all 500ms;
}

• official site - http://reactcommunity.org/react-transition-group/css-transition