6. 컴포넌트 반복

---

6-1. 데이터 배열을 컴포넌트로 변환하기

---

배열을 컴포넌트에서 출력하려면 어떻게 해야할까?

우선 컴포넌트에서 렌더링하려면 JSX가 필요하기 때문에(꼭 그런 건 아니지만) 우리가 가진 배열의 데이터를 JSX로 가공해야할 필요가 있다

이는 자바스크립트 Array의 내장 함수인 map으로 쉽게 구현이 가능하다

const IterationSample = ()=>{
    const names = ['눈사람','얼음','눈','바람'];
    const forRender = names.map((v,i)=><li key={i}>{v}</li>);
    return(
        <div>
            {forRender}
        </div>
    )
}

6-1-2. 리스트의 키

---

list, key

list, key

에서 한번 다루었다

6-2. 응용

---

추가와 삭제 기능을 추가하기 위해서 내부의 값이 바뀌어야하기 때문에 state값을 설정해주어야한다

데이터 배열을 담을 state, 사용자의 입력을 받을 state, key로 설정해줄 id 값 state까지 총 3가지의 상태가 필요하다

• id state?

상태추가

---

const IterationSample = ()=>{
    const [names, setName] = useState([
        {id: 1, text: '가나다'},
        {id: 2, text: '라마바'},
        {id: 3, text: '사아자'},
        {id: 4, text: '차카타'},
    ]);
    const [input,setInput] = useState('');
    const [keyId,setKeyId] = useState(5);

우선 앞서 말한 3가지 상태를 추가해 주었다

keyId의 기본값이 5인 이유는 names의 길이가 4이기 때문에 다음에 추가될 객체의 키는 5라서

6-2-1. 데이터 추가

---

준비 조건이 갖추어졌으니 추가 기능을 구현해 보자

const IterationSample = ()=>{
    const [names, setName] = useState([
        {id: 1, text: '가나다'},
        {id: 2, text: '라마바'},
        {id: 3, text: '사아자'},
        {id: 4, text: '차카타'},
    ]);
    const [input,setInput] = useState('');
    const [keyId,setKeyId] = useState(5); 

        const forRender = names.map(v=><li key={v.id}>{`key : ${}, value : ${v.text}`}</li>);
    return(
        <div>
            {forRender}
        </div>
    )
}

names를 useState로 관리하게 되었으니 렌더링하는 map함수를 조금 수정해주었다

이제 입력을 주면 입력된 데이터를 가지고 배열에 추가시켜야하는데 그러기 위해서 input태그를 추가하자

return (
        <div>
            <form action="" onSubmit={handleSubmit}>
                <input type="text" value={input} onChange={(e)=>{setInput(e.target.value)}}/>
            </form>
            <ul>
                {forRender}
            </ul>
        </div>
    )

예제에서는 input 아래에 button을 넣고 onClick 이벤트로 추가를 제어하던데

나는 엔터로 입력받고 싶어서 form을 추가해 onSubmit 추가 이벤트를 관리, input은 onChange에서 관리하기로 했다

const handleSubmit = (e)=>{
        e.preventDefault();
        const nextNames = names.concat({id : keyId, text : input});
        setName(nextNames);
        setKeyId(keyId+1);
        setInput('');
    }

submit 이벤트가 실행되면 페이지가 새로고침되기 때문에 그것을 막아주고 준비해둔 keyId와 input에서 받아온 데이터로 새로운 데이터를 추가한 뒤 keyId는 1을 증가시켜주고 input값은 ''로 초기화

6-2-2. 데이터 삭제

---

삭제는 리스트 항목 옆에 버튼을 만들고 버튼을 누르면 그 항목이 삭제되게끔 구현하려고 했다

그렇기 때문에 배열을 가지고 forRender를 만드는 과정에서 버튼을 추가해주기로 했다

const forRender = 
                    names.map(v=> <li key={v.id}> {`key : ${v.id}, value: ${v.text}`}  
                        <button onClick={()=>onRemove(v.id)}>del</button> </li>);

추가해 준 버튼엔 onClick이벤트로 onRemove함수를 콜백으로 넘겨주어 클릭 이벤트가 발생했을 때 실행되게해줬고

파라미터로는 데이터 삭제를 위한 항목의 key값을 넘겨줬다

이제 각 항목 버튼의 onRemve는 자기 항목의 고유한 key를 가지고 있는셈

const onRemove = (id) => {
        const nextNames = names.filter(v=>v.id!==id);
        setName(nextNames);
    }

onRemove가 실행되면 자기가 가진 key값을 가진 원소를 제외한 나머지 원소들로 새로운 배열을 만들고 setName에 배열을 넘겨준다