React Practice(4-1)

App.js

import './App.css';
import Counter from './Counter';
import InputSample from './InputSample';
import InputTest from './InputTest';
import Parent from './Parent';
import Say from './Say';

function App() {
  return (
    <div>
    <InputSample/><hr/>
    <InputTest/><hr/>
    <Say/><hr/>
    <Counter/><hr/>
    <Parent/>
    </div>
  );
}

export default App;

 

Say.js

 

import {useState} from "react";
const Say = () =>{
    const [message,setMessage] = useState('안녕')
    const [color, setColor] = useState('black')
    const onClickEnter = ()=>{
        setMessage('반갑습니다.')
        setColor('blue')
    }
    const onClickleave = ()=>{
        setMessage('안녕히 가세요.')
        setColor('red')
    }

    const onClickRed = ()=>{
        setColor('red')
    }
    const onClickGreen = ()=>{
        setColor('green')
    }
    const onClickBlue = ()=>{
        setColor('blue')
    }
    const onClickPink = ()=>{
        setColor('pink')
    }

    const chageColor = (color)=>{
        setColor(color)
    }

    return(
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickleave}>퇴장</button>
            <h1 style={{color}}>{message}</h1>
           
            <button onClick={onClickRed}>빨간색</button>
            <button onClick={onClickGreen}>초록색</button>
            <button onClick={onClickBlue}>파랑색</button>
            <button onClick={onClickPink}>분홍색</button>


            <div>
            <button onClick={()=>chageColor('red')}>빨간색2</button>
            <button onClick={()=>chageColor('green')}>초록색2</button>
            <button onClick={()=>chageColor('blue')}>파랑색2</button>
            <button onClick={()=>chageColor('pink')}>분홍색2</button>
            </div>
           
        </div>
    )
}
export default Say;