[Codeit;] React 웹 개발 시작하기

2. React 개발 기초

index.html: 웹 브라우저에서 가장 먼저 실행되는 파일

index.js: index.html에서 실행되는 자바스크립트 파일

//index.js

import ReactDOM from 'react-dom';

ReactDOM.render(<h1>안녕 리액트!</h1>, document.getElementById('root'));
//첫번째 argument 값 -> 두번째 argument 값

import ReactDOM from 'react-dom';

ReactDOM.render{
	<>
    	<p>안녕</p>
        <p>리액트!</p>
    </>,
    document.getElementById('root')
};
//div 태그 없이 하나로 감싸기 가능(Fragment)

import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const imageUrl =
  'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png';

function handleClick(e) {
  alert('곧 도착합니다!');
}

ReactDOM.render(
  <>
    <h1>{product + ' ' + model} 주문하기</h1>
    <img src={imageUrl} alt="제품 사진" />
    <button onClick={handleClick}>확인</button>
  </>,
  document.getElementById('root')
);

//중괄호 안에서 자바스크립트 표현식(메소드, 속성값) 호출 가능
//이벤트 핸들러: 요소의 속성값으로 등록

import ReactDOM from 'react-dom';

//React Component
function Hello() {
	return <h1>안녕 리액트</h1>;
}
//첫 글자 대문자, JSX element 리턴 

const element = (
	<>
    	<Hello/>
    </>
);

ReactDOM.render(element, document.getElementById('root'));

//props: 컴포넌트에 지정한 속성 
import diceBlue01 from './assets/dice-blue-1.svg';
import diceBlue02 from './assets/dice-blue-2.svg';
import diceBlue03 from './assets/dice-blue-3.svg';
import diceBlue04 from './assets/dice-blue-4.svg';
import diceBlue05 from './assets/dice-blue-5.svg';
import diceBlue06 from './assets/dice-blue-6.svg';
import diceRed01 from './assets/dice-red-1.svg';
import diceRed02 from './assets/dice-red-2.svg';
import diceRed03 from './assets/dice-red-3.svg';
import diceRed04 from './assets/dice-red-4.svg';
import diceRed05 from './assets/dice-red-5.svg';
import diceRed06 from './assets/dice-red-6.svg';

const DICE_IMAGES = {
  blue: [diceBlue01, diceBlue02, diceBlue03, diceBlue04, diceBlue05, diceBlue06],
  red: [diceRed01, diceRed02, diceRed03, diceRed04, diceRed05, diceRed06],
};

function Dice({ color = 'blue', num = 1 }) {
  const src = DICE_IMAGES[color][num - 1];
  const alt = `${color} ${num}`;
  return <img src={src} alt={alt} />;
}

export default Dice;

//children props

//Button.js
function Button({ children }) {
  return <button>{children}</button>;
}

export default Button;


//App.js
import Button from './Button';
import Dice from './Dice';

function App() {
  return (
    <div>
      <Button>던지기</Button>
      <Button>처음부터</Button>
      <Dice color="red" num={4} />
    </div>
  );
}
//<></> 태그 안에서 더 간결하게 내용 작성 가능 

export default App;

import { useState } from 'react';
import Button from './Button';
import Dice from './Dice';

function random(n) {
  return Math.ceil(Math.random() * n);
}
//랜덤한 값 호출 함수 

function App() {	
	//파라미터: 초기값 전달, 배열의 형태로 요소 두 개 리턴 
  const [num, setNum] = useState(1);
  //[state값(현재 변수의 값), setter함수(state 값 -> 파라미터 전달 값)]
	
  const handleRollClick = () => {
    const nextNum = random(6);
    //1~6까지의 수 중 랜덤한 값 
    setNum(nextNum);
  };

  const handleClearClick = () => {
    setNum(1);
  };

  return (
    <div>
      <div>
        <Button onClick={handleRollClick}>던지기</Button>
        <Button onClick={handleClearClick}>처음부터</Button>
      </div>
      <Dice color='red' num={num} />
    </div>
  );
}

export default App;

import { useState } from 'react';
import Button from './Button';
import Dice from './Dice';

function App() {
  const [num, setNum] = useState(1);
  const [sum, setSum] = useState(0);
  const [gameHistory, setGameHistory] = useState([]);

  const handleRollClick = () => {
    const nextNum = random(6);
    setNum(nextNum);
    setSum(sum + nextNum);
    setGameHistory([...gameHistory, nextNum]);
    //객체의 주소값 불변, state를 바꾸기 위해서는 spread 연산자 사용 
  };

//...