React - 리액트를 다루는 기술(6)

복습할 내용: 자바스크립트 배열의 map() 메서드 & 함수 컴퍼넌트에서 map() 메서드를 이용한 내용추가 기능

Javascript - Array.prototype.map()

Array(배열)의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다.
map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과를
새로운 배열을 생성한다. ( 여기서 새로운 배열을 생성한다는 것이 중요하다 )

• arr.map(callback, [thisArg])
  map 함수의 파라미터 이며, 살펴보자면 callback에는 새로운 배열의 요소를 생성하는 함수이다.
  thisArg는 적어도 되고 안적어도 되는 선택 사항으로 callback 함수 내부에서 사용할 this 레퍼런스이다.

데이터 배열을 컴포넌트 배열로 변환하기

우선 가볍게 map을 사용하는 법을 알아보기 위해 간단한 로직을 보면

const IterationSample = () => {
	const names = ['눈사람', '얼음', '눈', '바람'];
  	const nameList = names.map(name => <li>{name}</li>;
	
	return <ul>{nameList}</ul>                               
}

이런식의 함수로 작성할 수 있다. 살펴보면 위의 names라는 배열이 있고 (사용할 데이터)
해당 배열을 return 하여 즉, JSX문법으로 {nameList}를 사용하여 ul태그 안에 넣어주어 사용할 수있다.

key

리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아 내기 위한 수단이다.
예를 들어 유동적인 데이터를 다룰 때는 원소를 새로 생성할 수도, 제거할 수도,수정할 수도 있는데, key가 없는 경우에는 Virtual DOM을 비교하는 과정에서(리액트에서는 브라우저의 DOM에 올리기전 Virtual DOM에서 기존의 DOM과 차이가 있는지를 먼저 비교한다.)

리스트를 순차적으로 비교하면서 변화를 감지한다. 이때 key가 없으면 이값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼수있다. (추가적으로 key값을 넣지 않으면 브라우저에서 오류메세지를 보낸다)

• Key의 값으로 사용하는 방법은 배열의 index 또는 객체의 id값으로 사용한다.

복합적인 map 함수 사용 & 데이터 제거 기능 구현하기 (ilter사용)

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("");
  const [nextId, setNextId] = useState(5);

  const onChange = (e) => setInputText(e.target.value);
  const onClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText,
    });
    setNextId(nextId + 1);
    setNames(nextNames);
    setInputText("");
  };

  const onRemove = (id) => {
    const nextNames = names.filter((name) => name.id !== id);
    setNames(nextNames);
  };

  const namesList = names.map((name) => (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
      {name.text}
    </li>
  ));

  return (
    <>
      <input
        value={inputText}
        onChange={onChange}
        onKeyDown={(e) => {
          if (e.key === "Enter") {
            onClick();
          }
        }}
      />
      <button onClick={onClick}>추가</button>
      <ul>{namesList}</ul>
    </>
  );
};

export default IterationSample;

해당 함수 컴포넌트는 살펴보면서 공부를 하기 위해 올린 것 (예습)
또한 후에 해당 함수들을 이용하여 직접 만들어 본걸 올려볼 예정