5일차 | react4(Icon, styled)

box_Box_!@#$(파일명_클래스명_고유id명?)  //  체크 박스 체크시 check true

CSS Module
-리액트 프로젝트에서 컴포넌트를 스타일링 할 때 
  CSS Module 기술을 사용하면 CSS 클래스가 중첩되는 것을 완벽히 방지할 수 있습니다.
-* CSS 파일 확장자를 .module.css로 해야함
-  파일ㅐ경로, 파일이름, 클래스이름, 해쉬값등 사용

react-icons
(https://react-icons.github.io/react-icons/#/)

yarn add react-icons

styled-components
JS안에 CSS를 작성하는 라이브러리입니다. 

yarn add styled-components

 

App.js

import React, { useState } from "react";
import Box from "./components/box"
import CheckBox from "./components/checkBox";
//yarn add styled-components
import styled, {css} from "styled-components";

const Circle = styled.div`//import styled, from "styled-components";
  width: 150px;
  height: 150px;
  // background: red;
  background: ${(props) => props.color || "black"}}
  border-radius: 50%;
  ${(props //import styled, { css} from "styled-components";
   ) =>
    props.big &&
    css`
      width: 300px;
      height: 300px;
    `}

`;

function App() {
  const [check, setCheck] = useState(false);
  const onChange = e => { 
    setCheck(e.target.checked)
  }



  return (
    <div>
      <Circle />
      <Circle color="deeppink" />
      <Circle color="deeppink" big />
      <p>Circle</p>
      <Box/>
      <CheckBox onChange={onChange} checked={check}>
        약관에 모두 동의
      </CheckBox>
      <p><b>check </b>{ check ? 'true' : 'false'}</p>
    </div>
  );
}

export default App;

 

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

components>checkBox.jsx

import React, { Children } from "react";
import { MdCheckBox, MdCheckBoxOutlineBlank } from 'react-icons/md';
import styles from "./checkBox.module.css";
//react-icons
//https://react-icons.github.io/react-icons/#/
//yarn add react-icons
function CheckBox({ children, checked, ...rest }) {   

    return (
        <div className={styles.checkbox}>
            {/* 리액트 아이콘 불러오기 */}
            {/* <MdCheckBox /><MdCheckBoxOutlineBlank/> */}
            <label>
                <input type="checkbox" checked={checked} {...rest}/>
                <div className={styles.icon}>
                    {checked ? (<MdCheckBox className={styles.checked} />) : (<MdCheckBoxOutlineBlank />)}
                </div>
            </label>
            <span>{children}</span>
        </div>
    );
}

export default CheckBox;

 

components>checkBox.module.css

.checkbox {
    display: flex;
    align-items: center;
}

.checkbox label {
    cursor: pointer;
}

.checkbox input {
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0;
}

.checkbox span {
    font-size: 1.2rem;
    font-weight: bold;
}

.icon {
    display: flex;
    align-items: center;
    font-size: 2rem;
    margin-right: 0.3rem;
    color: #adb5bd;
}

.checked {
    color: #339af0;
}

 

components>box.jsx

import React from "react";
import styles from "./box.module.css";


function Box() { 
    return (
      <div>
        <div className={styles.Box}>{styles.Box}</div>
        <div className={styles.Box2}>{styles.Box2}</div>
      </div>
    );
}

export default Box;

 

components>box.module.css

.Box{
background-color: aqua;
width: 140px;
height: 234px;
}
.Box2{
background-color: red;
width: 140px;
height: 234px;
}