키모스토리

#7 배열(map, filter, slice, concat, spread연산자) 본문

Web Devlopment/ReactJs

#7 배열(map, filter, slice, concat, spread연산자)

키모형 2025. 3. 21. 14:55
반응형

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>배열(map, filter, slice, concat, spread연산자)</title>
  </head>
  <body>
    <script>
      // concat, filter, map, slice, 스프레드(전개) 연산자.
      console.log("1.===================== 스프레드 연산자 [...]")
      const a = [1,2,3];
      const b = [...a]; // 스프레드연산자로 깊은 복사 실행      
      b.push(4); // b에 데이터 입력 (a, b는 다른 영역에 존재) 
      console.log(`a의 값은 ${a}`);
      console.log(`b의 값은 ${b}`);
      const c = [...a, 4];
      console.log(`c의 값은 ${c}`);
      
      console.log("2.===================== 추가하기 [concat]") // 추가할때 사용
      const a2 = [1,2,3];
      const b2 = a2.concat(4); 
      console.log(`a2의 값은 ${a2}`);
      console.log(`b2의 값은 ${b2}`);
      const c2 = [0,...a2, 4];
      console.log(`c2의 값은 ${c2}`);      

      console.log("3.===================== 걸러내기 [filter]") // 삭제할때 사용
      const a3 = [1,2,3];
      const b3 = a3.filter((n)=> n!=1);// bool을 return받고 true만 걸러낸다.
      
      console.log(`a3의 값은 ${a3}`);
      console.log(`b3의 값은 ${b3}`);

      console.log("4.===================== 잘라내기 [slice]") // 
      const a4 = [1,2,3,4,5];
      const b4 = a4.slice(1,3);   // 2,3리턴 (2) [2, 3]
      const c4 = [a4.slice(1,3)]; // 2,3리턴 [Array(2)] => [[1],[2]]
      console.log(`a4의 값은 ${a4}`);
      console.log(`b4의 값은 ${b4}`); 
      console.log(`c4의 값은 ${c4}`);

      console.log(b4);
      console.log(c4);

      const b41 = a4.slice(1,3);   // 2,3리턴 (2) [2, 3]
      const c41 = [...a4.slice(1,3)]; // 2,3리턴 (2) [2, 3]
      console.log(b41);
      console.log(c41);

      console.log("5.===================== 반복하기 [map]") // 
      const a5 = [1,2,3];      
      // a5.forEach((n) => {console.log(n);}); // 리턴못함.
      const b5 = a5.map((n)=>{return n;}); // const b5 = [...a5] 같음

      console.log(`a5의 값은 ${a5}`);
      console.log(`b5의 값은 ${b5}`); 

      // map은 스프레드와 달리 다른 연산 작업 수행이 가능함
      const c5 = a5.map((n)=>{return n+10;}); 
      console.log(`c5의 값은 ${c5}`); 


      console.log("6.===================== 데이터 변경 + map") // 
      const a6 = {id:1, name:"홍길동"};
      const d6 = {...a6, name:"임꺽정"}; // {id:1, name:"홍길동", name:"임꺽정"} 과 동일, 
      // d6.name="임꺽정";

      console.log(a6);
      console.log(d6);
      

      // 처음 받은 유저리스트
      const users = [
        {id:1, name:"나기량", phone:"22222"},
        {id:2, name:"박수기", phone:"33333"},
        {id:3, name:"김박사", phone:"44444"},
      ];

      // 변경요청된 유저데이터
      const updateData = {
        id:2, name:"홍길동", phone:"1234"
      };
      
      // 새로운 배열 반환 (불변성 유지)
      const updatedUsers = users.map(user =>
        user.id === updateData.id ? { ...user, ...updateData} : user
      );

      console.log(users);
      console.log(updatedUsers);

    </script>
  </body>
</html>

 

 

App.js (배열데이터를 ,react에서 반복 표시)

import "./App.css";

function App() {
  const list = [1, 2, 3];

  return (
    <div>
      {list.map((n) => (
        <h1 key={n}>{n}</h1> // key 속성 추가
      ))}
    </div>
  );
}

export default App;

 

반응형
저작자표시

'Web Devlopment > ReactJs' 카테고리의 다른 글

#9 useEffect  (0) 2025.03.24
#8 useState (상태관리)  (0) 2025.03.22
#6 JSX  (0) 2025.03.21
#5 리액트 시작하기  (1) 2025.03.12
#4 create-react-app  (0) 2025.03.12
'Web Devlopment/ReactJs' Related Articles more