2024-03-20 (70일차) - React 리액트 filter

린·2024년 3월 21일

[산대특] 프롬프트AI & OpenAPI & 공공데이터를 활용한 웹앱개발자 양성과정

목록 보기

65/86

📅 2024-03-20, 70일차

useState

useState는 상태를 저장하고 해당 상태를 갱신할 수 있는 변수와 그 변수를 갱신하는 함수를 반환한다. 이를 통해 함수형 컴포넌트에서도 상태를 선언하고 사용할 수 있다.

{recordNums.reverse().map(recordNum => < li>{recordNum}</ li>)}

recordNums 배열의 요소를 역순으로 출력하여 순서대로 나열된 목록을 생성

recordNums.reverse()
- recordNums라는 배열을 역순으로 뒤집는다
.map(recordNum => < li>{recordNum}</ li>
- 역순으로 뒤집힌 배열의 각 요소에 대해 반복하며 JSX 요소를 생성. map() 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 함수의 반환 값으로 새로운 배열을 생성.

filter

filter 적용방법

2번 인덱스가 아닌 인덱스배열을 출력

//원본배열
console.log("==원본==");
const arr = [10, 20, 30, 40, 50];
console.log(arr);

//필터적용배열
console.log("==filter 적용==");
const afterFilter = arr.filter((el,index) => {
  return index != 2;
});
console.log(afterFilter);

console 출력결과

"==원본=="
// [object Array] (5)
[10,20,30,40,50]
"==filter 적용=="
// [object Array] (4)
[10,20,40,50]

40이라는 element를 제외하여 출력

//원본배열
console.log("==원본==");
const arr = [10, 20, 30, 40, 50];
console.log(arr);

//필터적용배열
console.log("==filter 적용==");
const afterFilter = arr.filter((el,index) => {
  return el != 40;
});
console.log(afterFilter);

console 출력결과

"==원본=="
// [object Array] (5)
[10,20,30,40,50]
"==filter 적용=="
// [object Array] (4)
[10,20,30,50]

filter 사용하여 아이템 삭제

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 saveNumber = () => {
		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={saveNumber}>기록</button>
				&nbsp;
				<button onClick={clearNumbers}>전체기록삭제</button>
			</div>
		</>
	);
};

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

여러가지 함수 실행방식

function a(index) {
  console.log(`a 실행 됨, index : ${index}`);
}

// function b(){
//   a();
// }

// const b = function(){
//   a();
// }

// const b = () => {
//   a();
// }

const index = 2;

const b = () => {
  a(index);
};
const c = a;

b();
c();