6. map

안녕하세요! delay100입니다. 이번 포스팅에서는 map에 대해 공부해봅시다.

대부분의 설명은 주석으로 달아놓았으니 코드에 대한 설명은 주석을 확인해주세요!

책 리액트를 다루는 기술, 개정판의 6장 내용을 다루고 있습니다.

프로젝트 실행 방법에 대한 설명은 여기에 있습니다.

이번 포스팅의 Github 링크

https://github.com/delay-100/study-react/tree/main/ch6/hello-react

GitHub - delay-100/study-react

 

---

 

1. map?

 

map이란?

- 배열 객체의 내장 함수
- 반복되는 컴포넌트를 렌더링할 때 사용

 

arr.map(callback, [thisArg])
파라미터는 아래와 같습니다.

- callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 3가지 입니다.
1. curentValue: 현재 처리하고 있는 요소
2. index: 현재 처리하고 있는 요소의 index 값
3. array: 현재 처리하고 있는 원본 배열
- thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스

 

• 간단한 map 함수 예시

var numbers = [1, 2, 3, 4, 5];

var processed = numbers.map(function(num){
	return num*num;
});

console.log(processed);

• 간단한 map 화살표 함수 예시

const numbers = [1, 2, 3, 4, 5];

var processed = numbers.map(num => num * num);

console.log(processed);

 

 

---

2.  객체 배열 추가, 삭제하기

 

객체 데이터 추가/삭제 함수

추가: concat
삭제: filter

 

+ 삭제 filter 예시(2022-07-19 추가)

filter 함수에는 조건을 확인해 주는 함수를 파라미터로 넣어주어야 합니다. 

파라미터로 넣는 함수는 true 혹은 false를 반환해야 하며, 여기서 true를 반환하는 경우에만 새로운 배열에 포함됩니다.

const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const biggerThanFive = array.filter(number => number > 5);
// 결과: [6, 7, 8, 9, 10]

 

 

• text 추가 및 삭제 예시(concat, filter 사용) - src/IterationSample.js

import { useState } from "react";

const IterationSample = () => {
  const [names, setNames] = useState([
    // 객체 형태로 이루어진 데이터 배열
    { id: 1, text: "눈사람" },
    { id: 2, text: "얼음" },
    { id: 3, text: "눈" },
    { id: 4, text: "바람" },
  ]);
  const [inputText, setInputText] = useState(""); // 텍스트를 입력할 수 있는 input
  const [nextId, setNextId] = useState(5); // 새로운 항목을 추가할 때 사용할 id

  const onChange = (e) => setInputText(e.target.value); //inputText(e.target.value) 값이 변할때마다 Set시켜줌

  // 추가 버튼 클릭 시 실행되는 함수
  const onClick = () => {
    const nextNames = names.concat({
      // concat은 아예 새로운 배열을 만들어줌 vs push는 기존 배열 자체를 변경해줌(리액트에서는 concat이 불변성 유지때문에 사용함)
      // 새로운 항목 추가 시 객체의 id값은 nextId를 사용
      id: nextId, // nextId 값을 id로 설정하고
      text: inputText,
    });
    setNextId(nextId + 1); // 클릭될 때마다 값이 1증가함(nextId값에 1을 더해준다.)
    setNames(nextNames); // names 값을 업데이트한다.
    setInputText(""); // 기존의 input 값인 inputText를 비운다.
  };

  // 더블클릭 시 실행되는 함수
  const onRemove = (id) => {
    const nextNames = names.filter((name) => name.id !== id); // 필터로 지정된 name의 id 값이랑 더블클릭된 name 값이 다른지 확인하고 다르면 필터에 저장(같으면 새로운 배열에 저장되지x)
    setNames(nextNames);
  };

  const nameList = names.map((name) => (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
      {" "}
      {/*이름을 더블클릭하면 onRemove 함수 실행 */}
      {name.text}
    </li>
  ));
  return (
    <>
      <input value={inputText} onChange={onChange} />
      <button onClick={onClick}>추가</button>
      <ul>{nameList}</ul>
    </>
  );

  // // 예시2 - 일반 문자열 배열의 값에 index key를 달아줌
  //   const names = ["눈사람", "얼음", "눈", "바람"];
  //   const nameList = names.map((name, index) => <li key={index}>{name}</li>);
  //   return <ul>{nameList}</ul>;

  // // 예시1 - 일반적인 리스트를 만드는 html 코드
  //   return (
  //     <ul>
  //       <li>눈사람</li>
  //       <li>얼음</li>
  //       <li>눈</li>
  //       <li>바람</li>
  //     </ul>
  //   );
};

export default IterationSample;

• text 추가 및 삭제 예시(concat, filter 사용) - src/App.js

import { Component } from "react";
import IterationSample from "./IterationSample";

class App extends Component {
  render() {
    return <IterationSample />;
  }
}

export default App;

text 추가 및 삭제 예시(concat, filter 사용) 실행 결과

 

---

map에 대한 개념(key-value)은 과거에 많이 공부했어서 설명을 거의 생략했습니다..ㅎㅎ 

 

읽어주셔서 감사합니다. 잘못된 정보는 댓글로 알려주세요!