Component에 CSS 파일 적용하기

 

Component에 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"/>
            {/* 컴포넌트를 넣어줌. */}
            {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
            <BucketList list={this.state.list} />
        </div>
      </div>
    );
  }
}

export default App;

- css 파일을 import 해준다.

- className을 사용하여 css를 적용시켜준다.

 

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) => {
                    console.log(list);
                    return (<div className="list-item" key={index}>{list}</div>);
                })
            }
        </div>
    );
}

export default BucketList;

- BucketList는 style.css를 import 해주지 않아도 적용이 가능함

- 부모클래스인 App.js에 import 하였기 때문에 따로 적용하지 않아도 동작한다.

 

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;
}