아이스베어의 개발 일기

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 화면에 위 사진처럼 뜬다.

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

1. Visual Studio Code에 내가 실행할 파일을 만들어 띄운다.

나는 로컬디스크 C에 nodeEx 라는 파일을 생성했다.

2. Visual Studio Code에 터미널을 열어 아래의 사진처럼 코드를 입력한다.

파일이 생성된다!

여기에

cd first
npm run start

cd first를 입력한 후 npm run start 하면 리액트 앱이 생성된다.

terminal에 서버가 돌아간다고 뜨고 

완료가 되면 이 글씨와 함께 크롬창에 http://localhost:3000/ 로 뜬다!