React 에서 Map 사용하기!

Map 이란 ? 파라미터로 전달된 함수를 사용해서 각 요소를 규칙에 따라 변환 후 새로운 배열 생성

 

위에 코드는 실제 배열을 이용하는 것과 같이 배열을 만들어 주고

해당 배열의 내부 값들을 map을 통해 <li> 코드 사이에 넣어준다

 

그리고 return 할때 ul 태그 내부에 넣어주면 

아래와 같은 값들이 출력된다.

 

그런데 여기서 개발자 모드(f12)를 들어가면 오류가 발생한 것을 알 수 있다.

잘 생각해보면 우리가 java 에서 배운 map은 key 값과 value 값이 쌍으로 다녔다.

react의 map이라고 크게 다르지 않다.

 

방금 위에서 썼던 코드는 key 값을 쓰지 않은 map이었고 이는 key 값을 썼을때

성능이 훨씬 향상되는 map을 쓰는 이유를 상쇄시킨다. 이때문에 관리자 모드에서

warning 을 목놓아 외치는 것이다.

 

key 값을 넣음으로써 관리자 모드에는 평안이 찾아온다.

 

그런데 위의 코드만 봤을땐 key 값을 넣었을때 보면 막상 우리가 체감하는 기능상의 이점은 크게 느껴지지 않는다.

 

하지만 흔히 저 코드가 1억줄이라는 가정하에 생각해보면 화면에 표시하는 속도는 어마어마하게 차이날 것이 분명하다

 

key값이 필요한 이유는 변화가 일어난 부분의 key 값을 지정해줘서 변화 한 값을 찾기 위해 key를 지정한다.

 

key 값을 넣는 방법은 여러가지가 있다.

 

위의 코드 처럼 key 가 따로 지정되어 있지 않는 배열인 경우 index를 넣어 주면 된다.

 

이 index 값은 0,1,2,3 이런 식으로 부여 되지만

 

만약 배열이 삭제되거나 추가된다면 index 값이 변경된다.

 

이 index 값이 변경되는 것을 방지하거나 확실히 하고자 한다면 내부에 하나 만들어서 key 를 지정해주면 된다

(SQL의 Primary key 랑 동일한 기능이라고 생각하면 된다고 한다.)

 

아래는 예시의 코드는  key를 index로 지정하는것이 아니라 직접 숫자를 지정해주는 key값이다

 

Map을 이용한 좀 많이 어려운 코드를 배워보자!! 이걸 이해하면 react 레벨업 쑥쑥!

 

사실 저도 봐도봐도 헷갈리고 이해안가는게 많아서 여기에 올려두고 두고두고 보려구요!

react에 배열을 넣을때 push를 안쓰고 concat을 쓰는 간단한 이유도 정리해서 따로 올리고 링크해둘게요!

React 에서 배열에 값을 추가 할 때 concat을 쓰는 이유 (tistory.com)

import { useState } from "react";
//동적으로 변하는 배열 사용, ID는 자동으로 증가
const ArrayMap =()=>{
    const[names, setNames] = useState([
        {id: 1, text: "청소하기"},
        {id: 2, text: "점심먹기"},
        {id: 3, text: "강아지랑 산책하기"},
        {id: 4, text: "리액트 공부하기"},
    ]);
    // input을 받는 useState
    const [inputText, setInputText] = useState('');
    // 4번까지 이미 지정되어 있기 때문에 default 값을 5로 지정
    const [nextId, setNextId] = useState(5);
    //인풋창에서 입력 받은 값.
    const onChange = e => setInputText(e.target.value);
    // 배열의 concat은 문자열을 이어붙이는것. 배열에 값을 넣는 방법은 concat과 push 가 있다.
    // 이때 concat을 쓰는 이유는 배열을 아예 새롭게 만들어서 넣는다.
    // 위 코드 기준으로 1,2,3,4 에 5를 더하는건 push 아예 1,2,3,4,5 새로 만드는 건 concat
    const onClick = () =>{
        const nextNames = names.concat({
            // onclick 이 실행되면 새로운 배열을 concat으로 새롭게 만든다!
            id: nextId, 
            text: inputText
        });
        // 기존의 nextId에다가 +1을 해줘서 새로운 아이디를 만들어 주고
        setNextId(nextId + 1)
        //setNames 에는 위에 concat 으로 만들어 줬던 setNames 를 넣어준다.
        setNames(nextNames);
        // 마지막으로 setInputText를 초기화 해준다.
        setInputText('')
    };

    // 만약 삭제기능이 없었을땐 map을 통해 li 태그만 달아서 namesList에 쭉 넣었는데
    // 표현하면 됐는데 삭제기능을 추가한 순간 이 리스트로는 표현이 어려움
    // const namesList = names.map(name => <li key={name.id}>{name.text}</li>)

    //id 값을 가지고 filter를 통해서 id가 같지 않은 애들만 골라낸다!
    //즉 id가 같은 애들은 없어진다.
    const onRemove = id =>{
        const nextNames = names.filter(name => name.id !== id);
        setNames(nextNames);
    }

    const namesList = names.map(name =>(
        <li key ={name.id} onDoubleClick={()=>onRemove(name.id)}>{name.text}</li>
    ));

    return(
        <div>
            
            <p>삭제는 해당 항목을 더블클릭 하세요.</p>
            <input value={inputText} onChange={onChange} />
            <button onClick={onClick}>추가</button>
            <ul>{namesList}</ul>
        </div>
    );
}
export default ArrayMap;