컴포넌트 반복

컴포넌트 반복

• 코드를 작성하다보면 아래와 같이 반복되는 코드들이 생긴다.

<div>
  <ul>
    <li>닭</li>
    <li>돼지</li>
    <li>말</li>
    <li>소</li>
  </ul>
</div>

이런 상황에서는 map()함수를 사용하여 반복되는 컴포넌트를 랜더링 할 수 있다.

map()

arr.map(callback, [thisArg])

기본구문

import React from 'react';

const Sample = () => {
  const names = ['닭', '돼지', '말', '소'];
  const namesList = names.mapp((name, index) => <li key={index}>{name}</li>);
  return <ul>{namesList}</ul>;
};

export default Sample;

응용

import React, { 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 nameList = names.map(name => (
        <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
            {name.text}
        </li>
    ));

    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);
    }

    return (
        <div style={{ margin: '10px 0 0 50px' }}>
            <input value={inputText} onChange={onChange} />
            <button onClick={onClick}>추가</button>
            <ul>{nameList}</ul>
        </div>
    )
};

export default IterationSample;