리액트를 다루는 기술 + typescript 9장 3

CSS Module

• CSS를 불러와서 사용할 때, 클래스 이름을 고유한 값으로 만듭니다.

• [파일 이름]_[클래스 이름]_[해시값] 형태로 만듭니다.

• 파일 이름은 xxxxx.module.css 형태로 만듭니다.

• src디렉토리에 파일을 생성하여 예제를 만들어 보겠습니다.

CSSModule.module.css

.wrapper{
    background : black;
    padding : 1rem;
    color : white;
    font-size : 2rem;
}

/* 글로벌 CSS를 작성한다면 */

:global .something{
    font-weight : 800;
    color : aqua;
}

• 흔히 사용하는 이름으로 클래스 이름을 지어도 고유성이 유지됩니다.

• 해당 클래스는 바로 위에서 만든 스타일을 직접 불러온 컴포넌트
  내부에서만 작동하기 때문입니다.

• 특정 클래스가 웹 페이지에서 전역적으로 사용된다면 :global을 입력하면 됩니다.

이를 적용할 수 있는 컴포넌트도 작성 해 보겠습니다.

CSSModule.tsx

import React from 'react';
import styles from './CSSModule.module.css';

const CSSModule = () : JSX.Element => {
    return (
        <div className={styles.wrapper}>
            Hello, I am <span className="something">CSS Module!</span>
        </div>
    )
}
export default CSSModule;

• CSSModule.module.css의 내용을 styles변수로 접근 할 수 있습니다.
• <span> 키워드 내부의 something으로 모듈의 전역 변수도 사용 가능
  한 것을 알 수 있습니다.

App.tsx

import React, {Component} from 'react';
import CSSModule from './CSSModule';

class App extends Component {
    render() {
        return (
            <div>
                <CSSModule />
            </div>
        )
    }
}

---

결과몰

---

styled-components - Typescript Version

• 자바스크립트 or 타입스크립트 파일 안에 스타일을 선언하는 방식입니다.

• yarn add styled-components @types/styled-components

• tsx 파일 내부에 작성하므로 타입 전용 라이브러리도 같이 설치해야 합니다.

• 백틱 선언 후 css 관련 단어가 전부 string 처리 될 수 있으므로
  vscode-styled-components를 검색하여 설치합니다.

• 설치 완료 시, 색상 하이라이팅이 정상적으로 이루어집니다.

• 밑의 코드는 하이라이팅을 입힐 수 없어 string 처리 된 모습입니다.

  
  

StyledComponent.tsx

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

// prop으로 inverted가 올 수도, 오지 않을 수도 있다
// 다만, 그 유형은 true or false 형식입니다.
// 밑의 <Button> 컴포넌트 중에 아예 inverted 속성 자체가 없는 경우가 있어 "?"를 붙이면 됩니다.
// "?"를 없애고 싶다면, <Button> 컴포넌트에 inverted 속성을 무조건 넣어주면 됩니다.
interface propInverted{
    inverted ? : boolean
}

// 이 컴포넌트 작성 시, prop으로 color 속성이 전달됩니다.
interface propColor{
    color : string;
}

// 직접 propColor 인터페이스를 적용하여 내부에서 props 값을 
// 접근 할 수 있게 만들어 줍니다.
const Box = styled.div<propColor>`
    /** props로 넣어 준 값을 직접 전달 해 줄 수 있습니다. */
    background : ${(props : propColor) => props.color || 'blue'};
    padding : 1rem;
    display: flex;
`;

// button에 propInverted 인터페이스를 적용하여 props 값을
// 접근 할 수 있게 만들어 줍니다.
const Button = styled.button<propInverted>`
    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일 때 특정 스타일을 부여 해 줍니다. */
    /* 비구조화 할당으로 inverted 값을 추출합니다. */
    ${({inverted} : propInverted) => 
        inverted &&
        css`
            background : none;
            border : 2px solid white;
            color : white;
            &:hover{
                background : white;
                color : black;
            }
        `
    }
    & + button{
        margin-left : 1rem;
    }
`;

const StyledComponent  = () => (
    <Box color="black">
        <Button>안녕하세요</Button>
        <Button inverted={true}>테두리만</Button>
    </Box>
)
export default StyledComponent;

• 이제 App.tsx에서 구현하겠습니다.

App.tsx

import React, {Component} from 'react';
import StyledComponent from './StyledComponent';

class App extends Component {
    render() {
        return (
            <div>
                <StyledComponent />
            </div>
        )
    }
}
export default App;

---

결과물

---