-
리액트 기초이론 5 - 컴포넌트 스타일링 3 - Styled Components 해답프론트엔드/React 연습과제 해답 2022. 3. 7. 21:56728x90
* 연습과제 1
import './App.css'; import React from 'react' import styled, { css } from 'styled-components' const Button = styled.button` all: unset; color: white; cursor: pointer; border-radius: 5px; font-weight: bold; margin-left: 10px; display: inline-flex; align-items: center; justify-content: center; &:hover{ opacity: 0.7; } /* 버튼의 크기 설정 */ ${props => { const size = props.size || 'medium' switch(size){ case 'large': return css` height: 70px; padding-left: 15px; padding-right: 15px; font-size: 1.2rem; ` case 'medium': return css` height: 50px; padding-left: 10px; padding-right: 10px; font-size: 1rem; ` case 'small': return css` height: 30px; padding-left: 5px; padding-right: 5px; font-size: 0.8rem; ` } }} /* 버튼의 배경색 설정 */ ${props => { const color = props.color || 'tomato' switch(color){ case 'blue': return css` background:blue; &:hover{ background: skyblue; } ` case 'tomato': return css` background:tomato; &:hover{ background: lightsalmon; } ` case 'grey': return css` background:grey; &:hover{ background: lightgray; } ` } } } /* 전체 너비를 차지하는 버튼 */ ${props => props.width === 'fullWidth' && css` width: 100%; margin-left: 0px; margin-top: 10px; margin-bottom: 10px; `} ` function App() { const handleClick = () => alert('clicked button') // 이벤트핸들러 함수 return ( <div className="App"> <Button size="small" color="blue" onClick={handleClick}>Add Todo</Button> <Button size="medium" color="tomato"> <img src="http://simpleicon.com/wp-content/uploads/rocket.png" width="30px" height="30px"></img> Add Todo </Button> <Button size="large" color="grey">Add todo</Button> </div> ); } export default App;* 연습과제 2
import './App.css'; import Button from './Button'; import { Component } from 'react'; import styled, { css } from 'styled-components' const Modal = styled.div` width: 500px; margin: 100px auto; border: 1px solid tan; padding: 10px; text-align: center; ${props => { const state = props.open || false return state ? css`display: block;` : css`display: none;` }} ` const Header = styled.div` padding: 5px; font-size: 1.2rem; font-weight: bold; ` const Body = styled.div` padding: 5px; font-size: 0.9rem; margin: 20px; input{ width: 60%; height: 30px; border: 1px solid lightgray; border-radius: 5px; margin-bottom: 10px; } ` const Footer = styled.div` padding: 5px; display: flex; justify-content: flex-end; align-items: center; ` class App extends Component { state = { open: false } openModal = () => { this.setState({ open: true }) } closeModal = () => { this.setState({ open: false }) } render(){ const { open } = this.state const { openModal, closeModal} = this return ( <div className="App"> <Button handleClick={openModal}>Add Todo</Button> <Modal open={open}> <Header>You want to add new todo ?</Header> <Body> <label>todo name: <input type="text"></input></label><br/> <label>todo description: <input type="text"></input></label> </Body> <Footer> <Button size="small">Add</Button> <Button size="small" handleClick={closeModal}>Close</Button> </Footer> </Modal> </div> ); } } export default App;728x90'프론트엔드 > React 연습과제 해답' 카테고리의 다른 글
리액트 기초이론 9 - 리액트 훅(React Hook) 해답 (0) 2022.03.15 리액트 기초이론 7 - 이벤트(Event) 처리하기 해답 (0) 2022.03.09 리액트 기초이론 5 - 컴포넌트 스타일링 2 - SASS 해답 (0) 2022.03.02 리액트 기초이론 5 - 컴포넌트 스타일링 해답 (0) 2022.02.28 리액트 기초이론 4 - 컴포넌트의 생명주기 (Life cycle) 해답 (0) 2022.02.23