CSS in React

CSS

• React에서 컴포넌트에 CSS 스타일을 적용하기 위해서 src 폴더에 아래와 같은 style.css 파일로 스타일을 정의하고 컴포넌트에서 불러와보자!

style.css

.App{
    width: 100vw;
    min-height: 100vh;
    background-color: #eee;
    padding: 32px;
    box-sizing: border-box;
}

.container{
    max-width: 350px;
    min-height: 80vh;
    background-color: #fff;
    padding: 16px;
    margin: 20px auto;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.title{
    color: slateblue;
    text-align: center;
}

.line{
    margin: 16px 0px;
    border: 1px dotted #ddd;
}

.lists{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.list-item{
    padding: 16px;
    margin: 8px;
    background-color: aliceblue;
}

• src 폴더에 아래와 같은 App.js 파일과 BucketList.js 파일을 만들고 App.js에서 BucketList.js의 컴포넌트를 불러와보자.
• style.css 파일이 App.js와 같은 src 폴더에 있기 때문에 import './style.css'; 와 같이 불러와서 사용할 수 있다.

App.js

import React from 'react';
import logo from './logo.svg';
import BucketList from './BucketList';
import './style.css';


class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
    };
  }

  render() {
    console.log(this.state);

      return (
      <div className="App">
        <div className="container">
            <h1 className="title">내 버킷리스트</h1>
            <hr className="line"/>
            <BucketList list={this.state.list} />
        </div>
      </div>
    );
  }
}

export default App;

BucketList.js

import React from 'react'; 

const BucketList = (props) => {
    
    const my_lists = props.list;

    console.log(props);
    return (
        <div className="lists">
            { 
                my_lists.map((list, index) => {
                    return (<div className="list-item" key={index}>{list}</div>);
                })
            }
        </div>
    );
}
export default BucketList;

 

• 아래 실행 화면을 보면 BucketList.js 파일에는 css 파일을 임포트하는 부분이 없는데 어떻게 스타일이 적용이 된 것일까?
• 부모컴포넌트에다가만 공용 스타일을 선언하면 자식 컴포넌트는 굳이 불러올 필요가 없다!

실행화면

 

---

inline으로 style 부여하기

• HTML에서 사용하는 css 문법 대신 json 형식으로 스타일을 넣어준다.

 

HTML

<p style="color: orange; font-size: 20px;">orage</p>

JSX

//중괄호를 두번 쓰는 이유는 json도 자바스크립트이기 때문!
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

• 아래처럼 스타일 json을 변수로 만들고 사용할 수 있다!

function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}