React - 기록, map, 배열

• JS에서는 null == 0 == false 이 같은 의미
• react 는 불변성을 지켜줘야함 -> 원본은 건들면 안됨!

const arr = [1,2,3]; // 1,2,3
const arr2 = [...arr, 4]; // 1,2,3,4
const arr3 = [4, ...arr]; // 4,3,2,1

 

• map : 원본 배열을 기반으로 복사본을 만들기

const arr = [1,2,3];
const arr2 = [arr[0] + '번', arr[1] + '번', arr[2] + '번']; 
const arr3 = arr.map(number => number + '번')

 

console.clear();

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

const App = () => {
	const [num, setNum] = useState(0);
	const [recordNums, setRecordNums] = useState([]);

	const saveRecord = () => {
		setNum(0);
		setRecordNums([...recordNums, num]);
	};

	return (
		<>
			<div>숫자 : {num}</div>
			<div>
				{recordNums.length == 0 ? (
					<span>기록 없음</span>
				) : (
					<span>기록 : {JSON.stringify(recordNums)}</span>
				)}
			</div>
			<div>
				<button onClick={() => setNum(num + 1)}>증가</button>
				&nbsp;
				<button onClick={() => setNum(num - 1)}>감소</button>
				&nbsp;
				<button onClick={saveRecord}>기록</button>
			</div>
		</>
	);
};

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