[React] key 값 부여하기 / map()함수 이용하여 배열 렌더링

😫 어려운 리액트. 막 때려넣으면 언젠간 깨닫는 날이 오겠지

---

목표

리스트와 key값, 그리고 map 함수를 이용한 반복문 사용해보기.

---

저는 실용성 있는 To do List를 만드는 것이 목표입니다.

html로 리스트만 출력하는것은 굉장히 간단하지만,

나중에 할일을 추가, 수정, 삭제할 수 있는 기능을 만드는건 굉장히 어렵습니다.

input 값을 받아 목록에 배열을 추가해야하는데, 이 때 필요한 기능이 key 입니다.

 

원래 저는 값을 구하기 위해 JavaScript 를 이용할 때 index 값을 사용했으나,

개발자 말로는 '성능이 저하되고 state에 영향을 줄 수 있기 때문에 리액트에서는 권장하지 않는다'고 합니다.

https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

Index as a key is an anti-pattern

key를 지정하지 않았을 경우에 react는 자동으로 index를 key로 사용하게 됩니다.

항목의 순서가 바뀌지 않을 경우엔 index도 가능합니다.

 

리스트 구성하기

위의 기본적인 html 구조에서 key 값을 지정하기 위한 작업을 해 볼 것입니다.

TodoList.js 컴포넌트를 새로 만들고 간단한 html 코드를 작성해 주었습니다.

//todoList.js

import React from 'react'

function TodoList(){
    return(
        <div>
            <ul>
                <li>빨래하기</li> //index=0
                <li>청소기 필터 분해하기</li> //index=1
            </ul>            
        </div>
    )
}

export default TodoList;

이렇게 되면 현재 제가 따로 li 값에 key 값을 부여하지 않았으니  index값인

빨래하기는 0, 청소기 필터는 1 을 key값으로 가지게 됩니다.

이렇게 써도 문제가 없지만 todoList 기능 특성상 배열의 추가,제거,수정을 반복해야 하기 때문에

저는 여기에 key 값을 부여하기위해 코드를 변경했습니다.

 

코드 변경하기

//todoList.js

import React from 'react'

function TodoList(){
    const todos = [
        {id:'a', content:'빨래하기'},
        {id:'b', content:'청소기 필터 분해하기'},
    ]
    return(
        <div>
            <ul>
            </ul>            
        </div>
    )
}

export default TodoList;

li에 있던 값을 const로 변수선언을 하고 배열에 직접적으로 넣어놓았습니다.

그리고 map 함수를 사용하여 JSX 방식으로 출력해 볼 것입니다.

map()
반복되는 컴포넌트를 렌더링하기 위한 함수.
파라미터로 전달된 함수를 선언한 규칙에 따라 새로 배열을 생성.

문법 : arr.map(callbackFunction, [thisArg])

//todoList.js

import React from 'react'

function TodoList(){
    const todos = [
        {id:'a', content:'빨래하기'},
        {id:'b', content:'청소기 필터 분해하기'},
    ]
    const todoLista = todos.map((todo)=><li key={todo.id}>{todo.id}, {todo.content}</li>)
    return(
        <div>
            <ul>
                {todoLista}
            </ul>          
        
        </div>
    )
}

export default TodoList;

 

배열에 있는대로 키값에 id, 내용에 content 값을 부여하여 렌더링 하면 아래처럼 나옵니다.

결과물