React - className, useState 활용

• css, js 활용 (className)

<div id="root"></div>

.square {
  width: 200px;
  height: 200px;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  margin-top: 10px;
}

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-color: gold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  margin-top: 10px;
}

-> 클래스 이름을 활용한 style 설정

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

const Square = () => {
  return <div className="square">정사각형!</div>;
};

const Circle = () => {
  return <div className="circle">원!</div>;
};

const App = () => {
  return (
    <div>
      <Circle />
      <Square />
      <Circle />
      <Square />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

• useState

// 1번 예시
const App = () => {
  return <div></div>;
};

// 2번 예시
const App = () => {
  return (<div></div>);
};

// 3번 예시 -> 2번과 같은 경우 div 생략 가능!
const App = () => {
  return (
  <>
  </>
  );
};

console.clear();

import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";

let AppCallCount = 0;

const App = () => {
	console.log("AppCallCount 실행 횟수: " + AppCallCount++);
	
	const [num, setNum] = useState(100);
	console.log("num : " + num);
	
	return (
		<>
			<div>현재 숫자 : {num}</div>
			<button onClick={() => { 
					setNum(num + 1);			
				}}>버튼</button>
	  </>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));

• const [num, setNum] = useState(100); -> num, setNum: getter, setter에서 쓰이는 뜻과 같음
• setNum()으로 num을 세팅시켜줌