React useState

 

Say.js

import React, {useState} from 'react'  
  
// function Say() {
//     return (
//             <div>

//             </div>
//           );
//   }


//화살표 함수 변수
const Say = () => {
    const [message, setMessage] = useState('');  //useState('')의 빈값은 message에 들어감
    const onClickEnter  = () => setMessage('안뇽하세요');
    const onClickLeave  = () => setMessage('안녕히 가세요');
    
    return (
            <div>
                <button onClick={onClickEnter}>입장</button>
                <button onClick={onClickLeave}>퇴장</button>
                <h1>{message}</h1>
            </div>
          );
  }

  export default Say;

 

App.js

import './App.css';
import Say from './Say';


//JSX

function App(){
  
  return(
    <>

      <Say></Say>
    </>
  )

}




export default App;

 

say.js 업데이트

import React, {useState} from 'react'  
  
//화살표 함수 변수
const Say = () => {
    const [message, setMessage] = useState('');  //useState('')의 빈값은 message에 들어감
    const onClickEnter  = () => setMessage('안뇽하세요');
    const onClickLeave  = () => setMessage('안녕히 가세요');

    const [color, setColor] = useState('black');
    
    return (
            <div>
                <button onClick={onClickEnter}>입장</button>
                <button onClick={onClickLeave}>퇴장</button>
                <h1 style={{color}}>{message}</h1>

                <button style={{color : 'red'}} onClick = {()=> setColor('red')}>빨강색</button>
                <button style={{color : 'green'}} onClick = {()=> setColor('green')}>빨강색</button>
                <button style={{color : 'blue'}} onClick = {()=> setColor('blue')}>빨강색</button>
            </div>
          );
  }

  export default Say;