[REACT] React에 CSS 적용하기

[REACT] 훅. Hook

---

React 스타일링

• 태그에 직접 지정하기
• 일반 css 파일로 적용하기
• css 모듈로 적용하기
• public 폴더에 css 디자인

css 파일 이름 규칙
컴포넌트의 이름을 반드시 포함해서 만든다.

예를 들면
App.js 일 경우의 css 는 App.css 로 만든다.

---

1. 태그에 직접 지정하기

• 태그에 직접 디자인을 적용할 때는 { }로 묶어준다.
• CSS 속성 중 - 은 카멜표기법으로 대체된다.

style = { { css속성 : 값, css 속성 : 값 } }

<p style={{color: 'white', textAlign: 'center'}}>안녕하세요!!</p>

---

2. 일반 CSS 문법으로 디자인, import로 가져오기

App.css

.app_header {
    height: 50px;
    line-height: 50px;
    background-color: #000;
    margin: 0;
    padding: 0;
}

App.js

import './css/App.css'; //일반css파일로 디자인
......생략

---

3. CSS 모듈 사용하기

• 파일은 컴포넌트명.module.css 형식으로 만든다.
• css 파일은 import 구문으로 가져온다.
• 이 방식은 선택자에 고유한 해시값을 부여함으로 다른 파일과 디자인의 중복을 막아준다.
• :global 키워드를 이용해 전역 선택자(이름) 선언이 가능하다.

App.module.css 파일

.app_wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fff;
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* 전역선택자로 이름정하기 */:global .title {
    color: pink;
    font-weight: 900;
}

App.js 파일

• css 파일은 특정이름으로 import
• style = {특정이름.선택자}로 적용
• :global 키워드는 이름으로 바로 사용

import styled from './css/App.module.css';//css모듈로 디자인const App = () => {
    return (
        <Fragment>
            <section className={styled.app_wrap}> {/* css모듈 app_wrap적용 */}
                 <p className="title">CSS모듈로디자인!</p> {/* css모듈의 전역선택자 적용 */}
            </section>
        </Fragment>
    )
}

export default App;