[React] map 이용하기

 number과 index 모두 넘겨주는 방식을 사용하였다. key는 식별을 위해 필요한 내용이다. 

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 [number, setNumber] = useState(1);
	const [recordNums, setRecordNums] = useState([]);

	const increaseNum = () => {
		setNumber(number + 1);
	};
	const decreaseNum = () => {
		if (number === 0) return;
		setNumber(number - 1);
	};
	const saveRecord = () => {
		setNumber(0);
		setRecordNums([...recordNums, number]);
	};
	const clearRecord = () => {
		setNumber(0);
		setRecordNums([]);
	};

	return (
		<div>
			<div>숫자 : {number}</div>
			<div>
				<button onClick={increaseNum}>증가</button>
				<button className="ml-4" onClick={decreaseNum}>
					감소
				</button>
				<button className="ml-4" onClick={saveRecord}>
					기록
				</button>
				<button className="ml-4" onClick={clearRecord}>
					초기화
				</button>
			</div>
			<div>
				{recordNums.length == 0 ? (
					<h1>기록 없음</h1>
				) : (
				<>
						<h1>== 숫자 기록 ==</h1>
						<ul>
							{recordNums.map((number,index) => (
								<li key={index}>
									<span>
										{index + 1}번 : {number}
									</span>
								</li>
							))}
						</ul>
				</>
				)}
			</div>
		</div>
	);
};

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

 

https://codepen.io/ycraah/pen/bGPPZwq?editors=0010

map 이용

 

함수 분리

 

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 [number, setNumber] = useState(1);
	const [recordNums, setRecordNums] = useState([]);

	const increaseNum = () => {
		setNumber(number + 1);
	};
	const decreaseNum = () => {
		if (number === 0) return;
		setNumber(number - 1);
	};
	const saveRecord = () => {
		setNumber(0);
		setRecordNums([...recordNums, number]);
	};
	const clearRecord = () => {
		setNumber(0);
		setRecordNums([]);
	};
	const numberList = () => {
		if(recordNums.length !== 0) {
			return (
				<>
						<h1>== 숫자 기록 ==</h1>
						<ul>
							{recordNums.map((number,index) => (
								<li key={index}>
									<span>
										{index + 1}번 : {number}
									</span>
								</li>
							))}
						</ul>
				</>
				);
		}
		return <h1>기록 없음</h1>;
};

	return (
		<div>
			<div>숫자 : {number}</div>
			<div>
				<button onClick={increaseNum}>증가</button>
				<button className="ml-4" onClick={decreaseNum}>
					감소
				</button>
				<button className="ml-4" onClick={saveRecord}>
					기록
				</button>
				<button className="ml-4" onClick={clearRecord}>
					초기화
				</button>
			</div>
			<div>
				{numberList()}
			</div>
		</div>
	);
};

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

 

https://codepen.io/ycraah/pen/BagXJgG?editors=0010

map 내용 함수 분리

 

삭제 기능

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 [number, setNumber] = useState(1);
	const [recordNums, setRecordNums] = useState([]);

	const increaseNum = () => {
		setNumber(number + 1);
	};
	const decreaseNum = () => {
		if (number === 0) return;
		setNumber(number - 1);
	};
	const saveRecord = () => {
		setNumber(0);
		setRecordNums([...recordNums, number]);
	};
	const clearRecord = () => {
		setNumber(0);
		setRecordNums([]);
	};
	const numberList = () => {
		if (recordNums.length !== 0) {
			return (
				<>
					<h1>== 숫자 기록 ==</h1>
					<ul>
						{recordNums.map((number, index) => (
							<li key={index}>
								<span>
									
									{index + 1}번 : {number}
								</span>
								&nbsp;
								<button onClick={() => removeNumber(index)} className="text-[blue]">
									삭제
								</button>
							</li>
						))}
					</ul>
				</>
			);
		}
		return <h1>기록 없음</h1>;
	};
	const removeNumber = (index) => {
		const filterRecordNums = recordNums.filter((_,_index) => _index != index);
		setRecordNums(filterRecordNums);
	};

	return (
		<div>
			<div>숫자 : {number}</div>
			<div>
				<button onClick={increaseNum}>증가</button>
				<button className="ml-4" onClick={decreaseNum}>
					감소
				</button>
				<button className="ml-4" onClick={saveRecord}>
					기록
				</button>
				<button className="ml-4" onClick={clearRecord}>
					초기화
				</button>
			</div>
			<div>{numberList()}</div>
		</div>
	);
};

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

 

https://codepen.io/ycraah/pen/vYqodBR?editors=0010

삭제 기능 구현