[React/리액트] 리스트와 함수 사용, 버튼활용하여 색 바꾸기

1탄에 이어서 하는 것이다!

Say.js  파일을 만들어 준다.

 

Say.js

import React, {useState} from 'react'

const Say = () => {
    //hook
    const[message, setMessage] = useState('')
    const [color, setColor] = useState('black')
    const onClickEnter = () => setMessage('안녕하세요')
    const onClickLeave = () => setMessage('안녕히가세요')
    return (
    <div>
        <button onClick={onClickEnter}> 입장 </button>
        <button onClick={onClickLeave}> 퇴장 </button>
        <h1 style={{color}}>{message}</h1>
        <button style={{color:'green'}} onClick={() => setColor('green')}>초록색</button>
        <button style={{color:'blue'}} onClick={() => setColor('blue')}>파란색</button>
    </div>
    )
}

export default  Say

App.js 파일에 아래의 내용을 추가한다.

 

App.js

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

function App() {
  let a = '홍길동'
  let arr = [1, 2, 3, 4, 5]
  let str = ''
  let result ='홍말자'
  {
    result = str && '홍길동'
    str ='5'
    result = str && '홍길동'
    console.log("여기값은 "+result) //홍길동
  }
  return (
  <>
    안녕하세요? {a} 님 {arr.map(i=> i*5+' ')}
    <Say />

  </>
  //jsx에서 반복문과 if문 사용불가
  //short circuit 또는 3항 연산자
  )
}

export default App

 

localhost:3000 화면에 위 사진처럼 뜬다.

 

아래의 버튼을 누르면 글씨 색도 변환다는 것을 확인할 수 있다!

퇴장 눌렀을 때

초록색 버튼 눌렀을 때

초록색 버튼 누른 상태에 퇴장 버튼을 눌렀을 때