[React] 리액트에서 map함수 사용하기

리액트에서 배열을 수정할 필요가 있을때 자바스크립트의 배열수정 함수인 push, pop 등은 사용하지 못한다.

위 함수들은 기존 배열을 그대로 가져다가 변경해주는 것이기 때문에 리액트가 어떤 항목이 바뀌었는지 인식하지 못하는 문제가 발 생할 수 있다. 리액트의 렌더링 기준은 예전 스테이트와 현재 스테이트가 달라졌을 때를 기준으로 한다. 

 

대신 map함수를 사용할 수 있다. 어떻게 사용해야 하는지 간단한 예시를 들어서 기록하려고 한다. 

 

 

1. 기본 사용방법

상황) state로 만들어둔 배열을 map함수를 사용해서 <li></li>안에 하나씩 넣어서 화면에 출력

import "./App.css";
import React, { useState } from "react";

function App() {
    const [cookies, setCookies] = useState(["초코쿠키", "화이트초코쿠키", "아몬드쿠키", "민트초코쿠키"]);
    
    return (
        <div className="App">
            <div>오늘의 쿠키</div>
            <ul>
                {cookies.map((ele) => {
                    return <li>{ele}</li>;
                })}
            </ul>
        </div>
    );
}

export default App;

코드 출력화면

 

 

 

2. 변경하고자 하는 부분이 여러곳일 때

상황) 쿠키이름 옆에 칼로리를 표기하려고함.

 

1) 2차원배열

const [cookies, setCookies] = useState([
        ["초코쿠키", "300kcal"],
        ["화이트초코쿠키", "320kcal"],
        ["아몬드쿠키", "280kcal"],
        ["민트초코쿠키", "350kcal"],
    ]);
    console.log(typeof cookies);

    return (
        <div className="App">
            <h1>오늘의 쿠키</h1>
            <ul>
                {cookies.map((ele) => {
                    return (
                        <li>
                            {ele[0]} - {ele[1]}
                        </li>
                    );
                })}
            </ul>
        </div>
    );

출력화면

그런데 이런식으로 하면 2차원배열의 요소가 여러개 일때는 사용하기가 번거롭게 된다. 이럴때는 객체배열을 사용해서 배열값을 관리해주면 key, value를 사용해서 간단하게 관리할 수 있다.

 

2)객체배열

const [cookies, setCookies] = useState([
        { cookieName: "초코쿠키", kcal: "300kcal" },
        { cookieName: "화이트초코쿠키", kcal: "320kcal" },
        { cookieName: "아몬드쿠키", kcal: "280kcal" },
        { cookieName: "민트초코쿠키", kcal: "350kcal" },
    ]);

    return (
        <div className="App">
            <h1>오늘의 쿠키</h1>
            <ul>
                {cookies.map((ele) => {
                    return (
                        <li>
                            {ele.cookieName} - {ele.kcal}
                        </li>
                    );
                })}
            </ul>
        </div>
    );

출력화면

전과 동일한 화면이 출력된 것을 볼 수 있다.

 

map함수 사용시 주의사항!

위와 같이 함수를 실행시키면 화면에 보일때는 잘 작동하는 것 처럼 보일 수 있다. 하지만 콘솔창에 보면 경고가 뜨는데,

키경고

map함수를 사용할 때는 키값을 필수로 써줘야한다. 이때 키에는 고유한 값을 정해줘야한다. map에서 i는 배열의 순서를 의미하는데 이건 말그대로 배열의 순서이기 때문에 키값으로는 사용하면 안된다. 배열 한줄을 삭제하면 순서는 뒤바뀌게 되므로 후에 리액트에서 성능 최적화를 할때 문제가 발생한다. 

 

아래와 같이 고유한 값으로 li에 키값을 넣어주면, 

 

{cookies.map((ele) => {
                    return (
                        <li key={ele.cookieName}>
                            {ele.cookieName} - {ele.kcal}
                            {/*<button onClick={onRemove}>삭제</button>*/}
                        </li>
                    );
                })}

키오류 사라짐

 

키오류가 사라진걸 볼 수 있다.