리액트 기초이론 5 - 컴포넌트 스타일링 해답

 

* 연습과제 1

import Button from './Button'
import './Nav.css'

function Nav(){
    const navigate = (url) => {
        window.location.href = url
    }
    return (
        <div className="nav-container">
            <Button handleClick={() => navigate("https://google.com")}>구글</Button>
            <Button handleClick={() => navigate("https://naver.com")}>네이버</Button>
        </div>
    )
}

export default Nav

.nav-container{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 70px;
    box-shadow: 0 4px 10px 2px grey;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
}

import './App.css'; 
import { Component } from 'react';
import Nav from './Nav'

class App extends Component { 
  render(){ 
    return ( 
              <div className="App"> 
                <Nav></Nav>
              </div> 
            ); 
  } 
}
   
export default App;

 

* 연습과제 2

import './App.css';
import Modal from './Modal';
import Button from './Button';
import { Component } from 'react';

class App extends Component {
  state = {
    open: false,
    msg: ''
  }
  openModal = () => {
    this.setState({ open: true })
  }
  closeModal = () => {
    this.setState({ open: false })
  }
  handleRemove = () => {
    this.closeModal()
    this.setState({msg: 'removed successfully !'})
  }
  render(){
    const { open, msg } = this.state
    const { openModal, closeModal, handleRemove} = this
    return (
      <div className="App">
        <Button handleClick={openModal}>Remove Todo</Button>
        <h1>{msg}</h1>
        <Modal open={open}>
          <div className="header">You want to remove this todo ?</div>
          <div className="body">
            If you remove this todo, you cannot see this again later !!
          </div>
          <div className="footer">
            <Button size="small" handleClick={handleRemove}>Remove</Button>
            <Button size="small" handleClick={closeModal}>Close</Button>
          </div>
        </Modal>
      </div>
    );
  }
}

export default App;

 

* 연습과제 3

import './Card.css'

function Card({word_picked}){
    return (
        <div className="card-container">
          <h2>{word_picked.word}</h2>
          <h3>{word_picked.meaning}</h3>
        </div>
    )
}

export default Card

.card-container{
  background: tan;
  width: 30%;
  margin: auto;
  padding: 20px;
}

import './App.css';
import { Component } from 'react';
import words from './dummyData'
import Card from './Card'

class App extends Component {
  state = {
    number: 0,
  }
  pickRandomNumber = (min, max) => {
    return Math.floor( Math.random() * (max-min+1) ) + min
  }
  setNumber = () => {
    this.setState({ number: this.pickRandomNumber(0, words.length-1)})
  }
  componentDidMount(){
    this.countID = setInterval(
      this.setNumber
    , 1000)
  }
  
  componentWillUnmount(){
    clearInterval(this.countID)
  }
  
  render(){
    const { number } = this.state
    const word_picked = words[number]
    console.log(words.length, number)
   
    return (
      <div className="App">
          <h1>Flash card</h1>
          <Card word_picked={word_picked}></Card>
      </div>
    );
  }
}

export default App;

 

* 연습과제 4

import React from 'react'
import './Input.css'

function Input({ label, size, color, width, handleChange, disabled, placeholder
 }){
    return (
      <div className='Input-container'>
        <label className={`Input-label ${color}`}>{label}</label>
        <input 
                className={`Input-box ${size} ${color} ${width}`} 
                onChange={handleChange} disabled={disabled} placeholder={placeholder}
            />
      </div>
    )
}

export default Input;

Input.defaultProps = {
    size: 'medium',
    color: 'tomato',
    disabled: false
}

.Input-container{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 500px;
  margin: 10px;
}
.Input-label{
  font-style: italic;
  font-size: 20px;
  text-align: right;
}
.Input-box{
  outline: none;
  border: 2px solid;
  border-radius: 10px;
}

/* Input 의 배경색 설정 */
.blue{
  color:blue;
  border-color:blue;
}
.blue::placeholder{
  color: blue;
}
.blue:focus{
  color: skyblue;
}
.tomato{
  color: tomato;
  border-color:tomato;
}
.tomato::placeholder{
  color: tomato;
}
.tomato:focus{
  color: lightsalmon;
}
.grey{
  color: grey;
  border-color: grey;
}
.grey::placeholder{
  color: grey;
}
.grey:focus{
  color: lightgray;
}

/* Input 의 크기 설정 */
.large{
  width: 400px;
  height: 50px;
  
  margin-left: 15px;
  padding-left: 15px;
  font-size: 25px;
}
.medium{
  width: 300px;
  height: 40px;
  
  margin-left: 10px;
  padding-left: 10px;
  font-size: 20px;
}
.small{
  width: 200px;
  height: 30px;

  margin-left: 5px;
  padding-left: 5px;
  font-size: 15px;
}

import './App.css';
import React, { Component } from 'react'
import Input from './Input'

function App() {
  const handleChange = () => console.log('Typing something...') // 이벤트핸들러 함수
  return (
    <div className="App">
     <Input size="small" color="blue" handleChange={handleChange} disabled={true} label="Add Todo" placeholder="Type todo to add ..."/>
     <Input size="medium" color="tomato" label="입력창" placeholder="뭐든지 입력하세요 !"/>
     <Input size="large" color="grey" label="Remove Todo" placeholder="Type todo to remove ..."/>
    </div>
  );
}

export default App;

.App {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}