[React] 컴포넌트 반복

이 글은 [리액트를 다루는 기술](저자 김민준, 출판사 길벗) 교재를 보고 공부하며 정리한 글임.

---

IterationSample.js

import React from 'react';

const IterationSample =()=> {
    return(
        <ul>
            <li>눈사람</li>
            <li>얼음</li>
            <li>눈</li>
            <li>바람</li>
        </ul>
    );
};

코드가 복잡해지면 이렇게 반복되는건 낭비

---

자바 스크립트 배열 객체의 내장함수인 map함수를 사용하면 반복되는 컴포넌트 렌더링 가능

---

key는 컴포넌트 배열을 렌더링 했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용

​

IterationSample.js

import React from 'react';

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

export default IterationSample;

---

push 함수는 기존 배열 자체를 변경

concat은 새로운 배열을 만들어준다

​

IterationSample.js

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 onChange = e => setInputText(e.target.value);
   const onClick =() => {
       const nextNames = names.concat({
           id: nextId,
           text: inputText
       });
       setNextId(nextId +1);
       setNames(nextNames);
       setInputText('');    
    };
   

   const nameList = names.map(name => <li key={name.id}>{name.text}</li>)
   return (
   <>
   <input value={inputText} onChange={onChange} />
   <button onClick={onClick}>추가</button>
   <ul>{nameList}</ul>;
   </>
   );
};

export default IterationSample;

---

데이터 제거 기능 구현하기

​

filter 이용

​

IterationSample.js

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 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 nameList = names.map(name => 
   <li key={name.id} onDoubleClick={()=> onRemove(name.id)}>
       {name.text}</li>)
   return (
   <>
   <input value={inputText} onChange={onChange} />
   <button onClick={onClick}>추가</button>
   <ul>{nameList}</ul>;
   </>
   );
};

export default IterationSample;