컴포넌트 안 코드가 계속 반복될때 해결할수 있는 방법?

1. 걍 하나씩 다 추가 한다
2. 중복된 코드를 만드는 함수를 만들고 함수를 계속 호출한다
3. 중복된 코드를 만드는 함수를만들고 이를 map함수를 통해 요소 순회를 한다

자바스크립트 배열의 map 함수

map 함수란?

JS 배열의 빌트인 메서드로, 해당 배열에 map 메소드를 실행시켜 파라미터로 함수를 전달하면, 해당 함수가 요소 순회를 한뒤에 새로운 배열을 만든다

// 반복되는 코드를 만드는 함수
function User({user}){

<div>
 <b> {user.username} </b> <span> {user.email} </span>
</div>
}

// user라는 이름의 배열 리스트(컴포넌트안에 만들어져 있다하자)
.....

//
reder(){

user.map(user => (<User user = {user})
}

이렇게 하면 기존 user 배열에 map 을 이용해서 user(기존 리스트)를 파라미터로 주고, 반복되는 코드를 만들는 함수인 User를 호출면서 파라미터로 user(user리스트의 한 요소를 준다)을 주는 화살표 함수를 만들어

배열을 새로 랜더링 할수있게 만들었다.

하지만 Key 는..?

배열에 key가 없다면 에러가 날것이다.(태그에 Key를 넣어야한다)

디폴트는 idex값으로 파라미터를 주기도 하지만

지금 user라는 배열에 user.id가 있으니 이를 파라미터로 지정해주면 된다.

데이터 추가 기능 구현하기

concat 함수를 이용 ⇒ 후에 스프레드 문법을 이용하면 더욱 불변성을 유지하면서 추가할수 있다

import React, { useState } from 'react'

function IterationSample() {

    const [name, setName] = useState([
        { id: 1, text: '눈사람' },
        { id: 2, text: '얼음' },
        { id: 3, text: '눈' },
        { id: 4, text: '바람' }
    ]);

    const [inputText, setInputText] = useState('');
    const [nextId, setNextId] = useState(5);

    const onChange = e => setInputText(e.target.value)
    const onClick = () => {

        const newNames = name.concat({
            id: nextId,
            text: inputText
        });
        setNextId(nextId + 1)
        setName(newNames)
        setInputText('')

    }

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

export default IterationSample;

• onClick을 하면 새로운 배열울 만들어주는 concat을 통해 기존 배열 + 새로 추가된 배열로 만들어줌
• 새로운 항목이 추가 될때마다 id는 nextid를 할당 받는다 → 클릭때마다 +1씩 늘어남
• 클릭할때마다 안에 내용을 '' 으로 만듬

이처럼 기존 상태를 유지하면서, 새로운 배열을 만드는것을 불변성 유지 라고 한다

데이터 제거 기능 구현하기

마찬가지로 불변성을 유지하면서 업데이트

filter 함수를 사용한다. ⇒ 특정 조건에 만족하는 원소들만 필터해서 거침, filter함수 인자에 분류하고 싶은 조건을 반환하는 함수를 넣어주면 된다.

import React, { useState } from 'react'

function IterationSample() {

    const [name, setName] = useState([
        { id: 1, text: '눈사람' },
        { id: 2, text: '얼음' },
        { id: 3, text: '눈' },
        { id: 4, text: '바람' }
    ]);

    const [inputText, setInputText] = useState('');
    const [nextId, setNextId] = useState(5);

    const onChange = e => setInputText(e.target.value)
    const onClick = () => {

        const newNames = name.concat({
            id: nextId,
            text: inputText
        });
        setNextId(nextId + 1)
        setName(newNames)
        setInputText('')

    }

    const onRemove = id => {
        const newNames = name.filter(name => name.id !== id);
        setName(newNames)
    }

    const nameLsit = name.map(name => <li key={name.id} onDoubleClick={() => onRemove(name.id)}>{name.text}</li>)
    return (
        <div>
            <input
                value={inputText}
                onChange={onChange}
            />
            <button
                onClick={onClick}
            >추가</button>
            <ul>{nameLsit}</ul>
        </div>
    )
}

export default IterationSample;

• 필터 함수를 이용하는 함수를 구현하고
• 화면에 랜더하기 전 리스트 구성하는 함수에 이벤트를 실행시켰다