Chapter3 - BucketList에 styled-components 적용하기

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;