JavaScript/React

React - 리스트 출력, 아이템 삭제

내이름효주 2024. 3. 21. 11:39
  • 순차적, 역순으로 기록하기
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); // 초기값 0인 변수 
	const [recordNums, setRecordNums] = useState([]); // 빈배열을 만듬

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

	return (
		<> // 형제로 만들면 안되니까 빈 태그 추가함
			<div>숫자 : {num}</div>
			<div>
				{recordNums.length == 0 ? (
					<span>기록 없음</span>
				) : (
					<>
						<h5>기록</h5>
						<ul>
							{recordNums.map((recordNum, index) => (
								<li key={index}>
									{index + 1}번 : {recordNum}
								</li>
							))}
						</ul>
						<hr />
						<h5>기록(역순)</h5>
						<ul>
							{[...recordNums].reverse().map((recordNum) => (
								<li>{recordNum}</li>
							))}
						</ul>
					</>
				)}
			</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"));
  •  [...recordNums] : 복사본 만들기
  • {[ ...recordNums].reverse().map((recordNum) => ({recordNum}))} -> [...recordNums].reverse() 형태로 만들어줘서 배열에 저장된 값들이 역순으로 나오도록 함
  • {recordNums.map((recordNum, index) => (<li key={index}>{index + 1}번 : {recordNum}</li> -> index값을 줘서 값을 고정할 수 있도록 해줌
  • 복수개의 데이터를 다룰때는 <li key={index}>를 써줘서 나중에 렌더링할 때 최적화 가능!, 인덱스는 유니크하니까!
  • 아이템 삭제
const arr = [10,20,30,40,50];

// v1
const afterFilter1 = arr.filter((el, index) => index != 2); -> return 생략, 코드 한줄짜리는 생략 가능하니까
const afterFilter1 = arr.filter((_, index) => index != 2);

// v2
const afterFilter2 = arr.filter((el, index) => {
return true
});

// v3
const afterFilter3 = arr.filter((el, index) => {
el != 40
});
  • v1에서 index 만 썼으니까 el를 _로 쓰면됨
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([10, 20, 30]);

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

	const removeNumber = (index) => {
		setRecordNums(recordNums.filter((_, _index) => _index != index));
	};

	const clearNumbers = () => {
		setRecordNums([]);
	};

	return (
		<>
			<div>숫자 : {num}</div>
			<div>
				{recordNums.length == 0 ? (
					<span>기록 없음</span>
				) : (
					<>
						<h5>기록</h5>
						<ul>
							{recordNums.map((recordNum, index) => (
								<li key={index}>
									<span>
										{index + 1}번 : {recordNum}
									</span>
									&nbsp;
									<button onClick={() => removeNumber(index)}>삭제</button>
								</li>
							))}
						</ul>
					</>
				)}
			</div>
			<div>
				<button onClick={() => setNum(num + 1)}>증가</button>
				&nbsp;
				<button onClick={() => setNum(num - 1)}>감소</button>
				&nbsp;
				<button onClick={saveRecord}>기록</button>
				&nbsp;
				<button onClick={clearNumbers}>전체기록삭제</button>
			</div>
		</>
	);
};

ReactDOM.render(<App />, document.getElementById("root"));
  • <button onClick={() => removeNumber(index)}>삭제 -> 삭제 버튼 클릭 시 removeNumber(index) 메서드를 주고
  • const removeNumber = (index) => {setRecordNums(recordNums.filter((_, _index) => _index != index));}; -> removeNumber메서드에 index를 넘겨주는거
    1. _ -> 현재 요소(사용하지 않음을 나타냄), _index -> 현재 요소의 인덱스
    2. _index != index -> 현재 인덱스가 삭제할 인덱스와 다른경우
  • <button onClick={saveNumber}>기록</button> 를 < button onClick=saveNumber()>기록</button> 이렇게 써도 된다