TIL. 22.06.27 React

컴포넌트에 스타일 추가 관련해서 막연하게 그냥 index.css 로 추가하면 되지~ 라고 생각했는데

이번에 nomad coder 영상을 보면서 컴포넌트 별로 필요한 스타일을 각각 주고, 큰 스타일은 index.css 로 주면 되겠구나 라는

생각이 들었다. 그래서 간단하게? 컴포넌트에 css 를 적용하는걸 적어보려 한다. 

 

먼저 예시를 위한 Button 컴포넌트이다. 

import styles from './Button.module.css'

function Button({text}){
    return <button className={styles.btn}>{text}</button>
}

export default Button

Button.js 파일

.btn {
    color:white;
    background-color: tomato;
    padding:20px
}

Button.module.css 파일

 

Button.js 코드를 보면 젤 윗 줄에 styles 라는 이름에 버튼모듈.css 를 불러온것을 볼 수있다. 

버튼은  className을 줄 수 있는데, 이때 지정파일 styles에 .btn 이라는 스타일을 불러오는 구조이다. 

( 마지,, router 같은 느낌이랄까..? 어떤 경로에 무엇을 불러오는..? )

 

한번 더 기억하자 !

마치 props 로 받아오는 것처럼 Button 컴포넌트의 리턴값 안에 className 을 주고 내가 지정한 이름인 styles 에 있는

여러 스타일중에 .btn 을 적용했다.

 

 

 

이걸로 먼가 작은 프로젝트를 만들 수 있을 것 같다. 좀 더 공부해서 첫번째 프로젝트를 하기 전에 토이프로젝트를 해봐야겠다.