스파르타코딩클럽 - 항해99/항해99 Chapter3 - react 주특기 기본

Chapter3 - BucketList에 styled-components 적용하기

Ming 2021. 11. 17. 16:55

BucketList.js 코드

import React from 'react';
import styled from "styled-components";


const BucketList = ({ list }) => {

  const my_lists = list

  return (
    <div>
      {
        my_lists.map((list, index) => {
       
          return (
          <Itemstyle key={index}>
            {list}
            </Itemstyle>);
        })
      }
    </div>
  );
}

const Itemstyle = styled.div`
padding: 16px;
margin: 8px;
background-color: aliceblue;
`;

export default BucketList;

 

App.js 코드

import React from 'react';
import BucketList from './BucketList';
import './style.css';
import styled from "styled-components";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ['영화관 가기', '매일 책읽기', '수영 배우기'],
    };
  }
 
  render() {
    return (
      <div className="App">

        <Container>
          <Title>내 버킷리스트</Title>
          <Line />
          <BucketList list={this.state.list} />
        </Container>

      </div>
    );
  }
}

const Container = styled.div`
background-color: #fff;
width: 50vw;
max-width: 350px;
margin: auto;
height: 80vh;
padding: 16px;
border: 1px solid #ddd;
border-radius: 5px;
`;

const Title = styled.h1`
color: slateblue;
text-align: center;
`;
const Line = styled.hr`
margin: 16px 0px;
`;


export default App;