728x90
반응형
1. 테스트 html 파일을 생성
test.html 파일 생성 → doc → 기본 html 구조 설정 → 마우스 우클릭 → Open In Default Browser → 테스트 브라우저 창 열고 → F12 → Console 값 확인 할 수 있도록 설정
2. 기능별 코드 (값 뿌리기, 값 추가하기, 값을 걸러내기, 값을 잘라내기, 값을 반복하기)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//concat, filter, map, slice, 스프레드(전개) 연산자
console.log("1================ 스프레드 연산자(값을 흩뿌릴때)")
const a = [1,2,3];
const b = [...a];
b.push(4); // b의 데이터 변경
console.log(`a의 값은: ${a}`); //1,2,3
console.log(`b의 값은: ${b}`); //1,2,3,4
console.log("2.============== 추가하기"); // 추가할때 주로 쓴다.
const a2 = [1,2,3];
const b2 = a2.concat(4);
console.log(`a2의 값은: ${a2}`); //1,2,3
console.log(`b2의 값은: ${b2}`); //1,2,3,4
const c2 = [0, ...a2, 4]
console.log(`c2의 값은: ${c2}`)
console.log("3.============== 걸러내기"); // 삭제할때 주로 쓴다.
const a3 = [1,2,3];
const b3 = a3.filter((n)=> {return n != 1;}); // bool을 return 받는다. -> true만 걸러낸다.
console.log(`b3의 값은: ${b3}`); // 1이 아닌것들만 출력을 해야하니, 2,3을 출력하면 정상이다.
console.log("4.============== 잘라내기");
const a4 = [1,2,3];
const b4 = a4.slice(0,2);
console.log(b4); // 1,2
const c4 = [...a4.slice(0,2), 4, ...a4.slice(2,3)]
console.log(c4); //1,2,4,3
console.log("5.============== 반복하기");
const a5 = [1,2,3];
a5.forEach((n)=> {console.log(n);}); // 리턴을 못함.(리턴을 못하니까 복사가 안된다.)
const b5 = a5.map((n)=> n+10); // 리턴값을 b5에 담을수 있다. map은 값 하나하나를 가공 가능하다.
console.log(b5);
</script>
</body>
</html>3. map을 이용하여 값을 출력하기
import './App.css';
function App() {
let list = [1, 2, 3]; // 스프링에서 데이터를 받아서 넣어준 값을 아래의 코드가 연산을 수행한다.
return (
<div>
<div>
{list.map((n) => (
<h1>{n}</h1>
))}
</div>
</div>
);
}
export default App;결과 화면
728x90
반응형
'⭐ React (리액트) > 리액트 기본' 카테고리의 다른 글
| 6. userState (0) | 2022.05.17 |
|---|---|
| 5. 배열 수정하기 (map과 spread응용) (0) | 2022.05.17 |
| 3. 기본문법 이해하기 (0) | 2022.05.17 |
| 2. 리액트 실행흐름 이해하기 (0) | 2022.05.17 |
| 1. 리액트 개발환경 구성하기 (0) | 2022.04.29 |
