(TIL8) React에서 배열내장함수 map 쓰기

져니·2021년 7월 9일

React

목록 보기

8/12

1. map함수❓

개념

자바스크립트 배열 객체의 내장함수
파라미터로 전달된 함수를 사용해서 배열 내 각 요소에 변경값을 주어 변경된 값을 결과로 새로운 배열을 생성할 수 있습니다.
똑같은 구조의 컴포넌트를 여러번 렌더링 할 수 있도록 하여 효율적으로 코드 작성이 가능함
라우터와 같이 사용하면 효율적으로 싱글페이지를 만들 수 있습니다!

어떻게 사용하는가?

arr.map(callback, [thisArg])

callback : 새로운 배열의 요소를 생성하는 함수, 파라미터는 아래 3개
① currentValue : 현재 처리 요소
② index : 현재 요소의 index값
③ array : 원본 배열
(선택항목) thisArg : callback 함수 내부에서 사용할 this 레퍼런스

for문은 안되는가?

리액트에서는 for문을 잘 쓰지 않고 map함수를 사용하여 정보를 컴포넌트를 리렌더링 합니다.

❗❗❗반드시 기억해야할 점❗❗❗

react에서는 map함수를 사용할때 키값을 부여해주는 것이 좋습니다!
만약 key가 설정되어 있지 않으면 가상 DOM을 순차적으로 비교하면서 감지하긴 하지만 key가 없을때보다 속도가 느려집니다ㅠㅠ
그리고 실행되긴 하지만 키값을 부여해달라고 메세지도 뜸!

2. map 사용하여 내비 메뉴리스트 만들어주기

⚙ 환경세팅

이전포스팅에서 깔았던 패키지들 모두 세팅되어있음(webpack,css,babel 등등)

저는 리액트로 내비바를 만들 것인데, 배열내장함수인 map을 이용할 것입니다!
기본셋팅으로 App컴포넌트를 만들고 안에 넣을 컴포넌트로 Navbar컴포넌트를 만들어줄것입니다!

현재 제 폴더의 파일 구조도입니다.

App컴포넌트 코드

import React, {Component} from 'react'
import Navbar from './Navbar'


class App extends Component{
    render(){
        return(
            <>
                <Navbar />
            </>
        )
    }
}

export default App;

{this.state.배열명.map(item=>{
	
	})}

import React, {Component} from 'react'
import '../css/Navbar.css'

class Navbar extends Component {
    state = {
        menu: [
            {
                id:1,
                url:"/Blog",
                text:"Blog"
            },
            {
                id:2,
                url:"/Velog",
                text:"Velog"
            },
            {
                id:3,
                url:"/Github",
                text:"Github"
            }
        ]
    }

    render(){
        return(
            <nav>
                <div className="nav-center">
                    <div className="nav-header">
                        <h1 className="logo">Logo</h1>
                    </div>
                    <div>
                        <ul className="links">
                            {
                                this.state.menu.map(item=>{
                                    const {id,url,text} = item
                                    return(
                                        <li key={id}>
                                            <a href={url}>{text}</a> 
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>   
                </div>
            </nav>
        )
    }
}

export default Navbar

상태값 안에 있으므로 map함수를 사용하기 위해서
{this.state.arr.map(callback)}형식으로 사용
key값은 id로 받아왔습니다.

💻 결과물

저는 따로 css도 적용시켰습니다ㅎㅎ

<>나머지 파일 코드</>

index.jsx 파일 코드

import React,{Component} from 'react'
import ReactDOM from 'react-dom'
import App from './component/App' 

ReactDOM.render(
    <App />,
    document.querySelector('#root')
)

index.html 파일 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet" href="./css/index.css"> -->
    <title>Document</title>
    <link rel="stylesheet" href="./dist/app.css">
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="./dist/app.js"></script>
</body>
</html>