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>
<button onClick={() => setNum(num - 1)}>감소</button>
<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>
<button onClick={() => removeNumber(index)}>삭제</button>
</li>
))}
</ul>
</>
)}
</div>
<div>
<button onClick={() => setNum(num + 1)}>증가</button>
<button onClick={() => setNum(num - 1)}>감소</button>
<button onClick={saveRecord}>기록</button>
<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를 넘겨주는거
- _ -> 현재 요소(사용하지 않음을 나타냄), _index -> 현재 요소의 인덱스
- _index != index -> 현재 인덱스가 삭제할 인덱스와 다른경우
- <button onClick={saveNumber}>기록</button> 를 < button onClick=saveNumber()>기록</button> 이렇게 써도 된다