React 숫자 기록, 전개구문, map, 배열, 리스트로 출력하는 다른방식

실행화면

HTML 코드

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

JS코드

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

const App = () => {
	const [number, setNumber] = useState(0);
	const [recordNums, setRecordNums] = useState([]);

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

	return (
		<div>
			<div>숫자 : {number}</div>
			{recordNums.length == 0 ? (
				<div>기록 없음</div>
			) : (
				<>
					<span>기록 : {JSON.stringify(recordNums)}</span> <h3>기록</h3>
					<ul>
						{recordNums.map((recordNum) => (
							<li>{recordNum}</li>
						))}
					</ul>
					<h3>기록(역순)</h3>
					<ul>
						{[...recordNums].reverse().map((recordNum) => (
							<li>{recordNum}</li>
						))}
					</ul>
				</>
			)}

			<div>
				<button onClick={() => { setNumber(number + 1); }} >
					증가
				</button>
				&nbsp;
				<button onClick={() => { setNumber(number - 1); }} >
					감소
				</button>
				&nbsp;
				<button onClick={saveRecord}>
					기록
				</button>
			</div>
		</div>
	);
};

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

JSON.stringify()

• JavaScript에서 객체나 배열을 JSON 문자열로 변환해주는 함수입니다. 쉽게 말해, JavaScript의 객체 데이터를 서버에 전송하거나 로컬 스토리지에 저장할 때 텍스트 형식으로 변환하는 데 사용됩니다.

사용법

 JSON.stringify(value, replacer, space);

• value: JSON 문자열로 변환할 JavaScript 객체나 배열.
• replacer (선택): 변환할 값들을 필터링하는 함수나 배열. 변환 과정에서 특정 속성을 제외하거나 선택적으로 포함할 수 있습니다.
• space (선택): 가독성을 높이기 위해 결과 문자열에 공백이나 탭 등을 추가할 수 있습니다. 들여쓰기의 수준을 정의하는데, 숫자나 문자열 값을 사용할 수 있습니다.

기록 : {JSON.stringify(recordNums)}
부분에 JSON.stringify를 안쓰고 그냥 recordNums만 넣는다면
결과값은 기록 : 1-10 이런식으로 나와 구분이 되지않는다 (1,-1,0인지 1,-10인지 알수없게됨)