[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 28회차 미션

패스트캠프 프론트앤드 인강 28일차 scss에서 css modules와 styled components를 배웠다.

CSS MODULES

리액트에서 컴포넌트를 꾸밀때 이 CSS Modules기능을 사용하면

css 클래스명이 중복되는것을 방지해준다

저장하고 가져올때 (명).module.css로 하면된다.

이렇게하면 고유화된 이름이 나타난다.

 

레거시 프로젝트에 리액트를 도입할 때
css클래스 네이밍 규칙 만들기 귀찮을때 사용하면 좋다.

 

이제 직접 사용해보자

import React, {useState} from 'react';
import "./Button.scss"
import CheckBox from './CheckBox';

function App() {
  const [check, setCheck] = useState(false);
  const onChange = (e) =>{
    setCheck(e.target.checked);
  }
  return (
    <div>      
      <CheckBox onChange={onChange} checked={checked}>다음 약관에 모두 동의</CheckBox>
    </div>
  );
}

export default App;

import React from 'react';

export default function CheckBox({checked, children,...rest}){
    return(
        <div>
            <label>
                <input type="checkbox" checked={checked} {...rest}></input>
    <div>{checked ? '체크됨' : '체크안됨'}</div>
            </label>
            <span>
                {children}
            </span>
        </div>
    );
}

이제 스타일링을 해보자.

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.125rem;
    font-weight: bold;
}

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

.checked{
    color:#339af0;
}

react-native-app에서 제공하는 아이콘들을 사용하고 지난시간에 배운 classNames를 사용해보자

https://react-icons.github.io/react-icons/

React Icons

import React from 'react';
import { MdCheckBox, MdCheckBoxOutlineBlank } from "react-icons/md";
import styles from './CheckBox.module.css';

export default function CheckBox({checked, children,...rest}){
    return(
        <div className={styles.checkbox}>
            <label>
                <input type="checkbox" checked={checked} {...rest}></input>
                <div className={styles.icon}>{checked ? <MdCheckBox className={styles.checked}/> : <MdCheckBoxOutlineBlank/>}</div>
            </label>
            <span>
                {children}
            </span>
        </div>
    );
}

만약 특정 태그안에 2개이상의 클래스를 넣어주려면

        <div className=`${styles.checkbox} ${styles.blabla}`>

 위방법이 번거로울경우 

(classNames/bind는 css modules를 좀더 쉽게쓸수있게 해주는 유틸)

...
import classNames from 'classnames/bind'
const cx = classNames.bind(styles);

function CheckBox(){
  return(
  ...
          <div className={cx('checkbox','blabla')}>
  );
}

styled-components

현재 스타일 컴포넌트가 인기있다.

CSS in JS 즉, 자바스크립트안에 CSS를 작성하는 라이브러리이다.

분리가되어 해당값들을 사용할수있게된다.

 

코드내 색상지원과 자동완성을 도와주는 툴

npm install styled-components --save

color를 circle태그안에서 수정하고싶으면 props를 이용한다.

props.huge가 true일때를 나타내려면 &&을 사용한다.

``안에 ``일땐 css를 import해서 아래예시처럼 사용한다.

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

const Circle = styled.div`
  width:5rem; 
  height:5rem; 
  // backgroud:black;
  background:${props => props.color};
  ${props => props.huge && 
  css`
    width:10rem;
    height:10rem;
  `
  }
`;

function App() {
  return (
    <>
    <Circle color='blue'/>
    <Circle color='pink' huge/>
    </>
  );
}

export default App;

background-color하니까 안먹네.. 주의하자

결과

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스