[React] 반복되는 컴포넌트를 효율적으로_ map()

map

* arr.map( callbackFunction(현재배열내의값, 현재배열내값의인덱스, 현재배열), callback함수내부에서 사용할 this레퍼런스 )

const number = [ 1, 2, 3, 4, 5 ];
const result = number.map( (num) => { num * num } );

key

• 렌더링시, 컴포넌트 배열에 어떤 변화가 일어났는지 더욱 빠르게 알아내기 위해 사용한다.
• map함수 인자로 전달되는 함수 내부에서 컴포넌트props를 설정하는 것과 같이 작성한다. 단, key값은 언제나 유일한 값이어야만 한다. 예를들어, 게시판의 게시물을 렌더링하는 예시가 있다면, "게시물번호"를 key값으로 설정할 수 있다.
• "눈사람, 얼음, 눈, 바람" 배열을 state를 활용하여 고유값을 만들고, 렌더링 하는 방식을 알아보자.

import React from 'react';

const IterationSample = () => {
  
  // 함수형 컴포넌트에서 names라는 state를 정의하고, setter인 setNames를 정의한 것.
  // useState 내부에는 객체 형식의 상태도 정의할 수 있으며, 밑에껀 객체형태의 배열을 정의한것임.
  const [names, setNames] = useState ([
    { id: 1, text: "눈사람" },
    { id: 2, text: "얼음" },
    { id: 3, text: "눈" },
    { id: 4, text: "바람" },
  ]);
  
  // inputText 와 nextId 등의 상태를 정의했다.
  const [inputText, setInputText] = useState('');
  const [nextId, setNextId] = useState(5);
  
  
  
  const inputChangeHandler = (e) => {
    setInputText(e.target.value);
  }
  
  // 내부의 names.concat()은, names라는 객체형태배열의 상태에 새로운 항목을 추가하는 것이다.
  // but, 단순히 concat으로만 새항목이 추가되는 것은 아니고, 상태를 변경하려면 역시 setter함수를 활용해야함.
  const buttonClickEvent = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText,
    });
    setNextId(nextId + 1);
    // 이렇게 setNames(nextNames)라는 부분이 상태를 새롭게 변경해 주는 것이고, 이걸로 새로운 값이 배열에 들어갈 수 있게 된다.
    setNames(nextNames);
    setInputText('');
  };
  
  const nameList = names.map( (name) => {
    <li key={name.id}> {name.text} </li>
  } )

  return (
    <>
    	<input 
    		value={inputText}
			// onChange함수는 input요소에서 값을 입력 받을 때 onChange 이벤트핸들링을 위해 반드시 필요. 사용자로부터 받은 값을 입력받는 다고 할 때에는 onChange가 필수라고 기억하면 된다.
			onChange={inputChageHandler}
		/>
    	<button
			// onClick함수는 버튼클릭이벤트 핸들링을 위해 정의함.
			onClick={buttonClickEvent}
		>
              추가 
		</button>
    	<ul> {nameList} </ul>
    </>
  )
}

export default IterationSample;