React 길벗

3장 컴포넌트

src>App.js--------------------

import React from 'react';
import Say from './Say';
const App = () => {
    return <Say />;
};
export default App;

src>Say.js--------------------

import React, { useState } from 'react';
const Say = () => {
  const [message, setMessage] = useState('입장 버튼을 누르세요');
  const onClickEnter = () => setMessage('안녕하세요!');
  const [color, setColor] = useState('black');
  const onClickLeave = () => (setMessage('안녕히 가세요!'), setColor('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;