[React] 컴포넌트 반복

반복적인 내용을 효율적으로 보여주고 관리하는 방법

map() 함수

• 자바스크립트 배열 객체의 내장 함수
• 기존 배열로 새로운 배열을 만드는 역할
• 파라미터로 전달된 함수를 사용해 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열 생성

문법

arr.map(callback, [thisArg])

• callback : 새로운 배열의 요소를 생성하는 함수
  • currentValue : 현재 처리하고 있는 요소
  • index : 현재 처리하고 있는 요소의 index 값
  • array : 현재 처리하고 있는 원본 배열
• thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스

 

예제

const numbers = [1, 2, 3, 4, 5];
const processed = numbers.map(num => num * num);
console.log(processed);

// [1, 4, 9, 16, 25]

key

• 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용
  • 유동적인 데이터를 다룰 때는 원소를 생성할 수도, 제거할 수도, 수정할 수도 있음

key 설정

• map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정
• key값은 언제나 유일해야 하므로 데이터가 가진 고윳값을 key값으로 설정

const IterationSample = () => {
	const names = ["이예은", "한관진", "김선우", "그누빌"];
    const nameList = names.map((name, index) => <li key = {index}>{name}</li>);
    return <ul>{nameList}</ul>;
};

export default IterationSample;

//<ul>
//	<li>이예은</li>
//	<li>한관진</li>
//	<li>김선우</li>
//	<li>그누빌</li>
//</ul>

• index : map 함수에 전달되는 콜백 함수의 인수
  • 고유한 값이 없을 때만 index를 key로 사용해야 함
  • index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못함.

예제

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); // 새로운 항목을 추가할 때 사용할 id

    const onChange = e => setInputText(e.target.value);
    const onClick = () => {
        const nextNames = names.concat({
            id : nextId,
            text : inputText
        });
        setNextId(nextId + 1);  // 다음에 추가되는 이름의 index를 미리 더해둔다
        setNames(nextNames);	// names 값을 업데이트
        setInputText('');
    }

    const onRemove = id => {
        const nextNames = names.filter(name => name.id !== id); // 선택한 id가 아닌 항목들만 배열에 남긴다
        setNames(nextNames);
    }
    
    const nameList = names.map(name => 
    	<li key = {name.id} onDoubleClick={() => onRemove(name.id)}>
        	{name.text}
        </li>);  // 항목을 더블클릭하면 onRemove 실행
    
    return (
        <>
            <input value = {inputText} onChange={onChange}/> 
            <button onClick={onClick}> 추가 </button>
            <ul>{nameList}</ul>
        </>
    );
}

export default IterationSample;

push() 함수

• 기존 배열 자체를 변경

concat() 함수

• 두 개 이상의 배열을 병합할 때 사용되는 메소드
• 기존 배열을 복사한 후 원소를 추가하여 새 배열을 리턴 (불변성 유지)

filter() 함수

• 불변성을 유지하면서 배열의 특정 항목을 지울 때는 배열의 내장 함수 filter를 사용
  • 배열에서 특정 조건을 만족하는 원소들만 쉽게 분류 가능

const numbers = [1, 2, 3, 4, 5, 6];
const biggerThanThree = numbers.filter(number => number > 3);
// [4, 5, 6]

---

정리

• 컴포포넌트 배열을 렌더링할 때는 key 값 설정에 항상 주의해야 한다.
• key 값은 언제나 유일해야 함
  • 값이 중복된다면 렌더링 과정에서 오류 발생
• 상태 안에서 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 배열 내장 함수(concat, filter 등)를 사용
  • 새로운 배열을 만든 후 이를 새로운 상태로 설정해주어야 함