react data list render

여러 개의 오브젝트가 담긴 객체를 랜더링할 때 map을 사용한다 foreach를 사용할 줄 알았는데 의외다.

{props.items.map((expense) => (
                    <ExpenseItem 
                    title={expense.title} 
                    amount={expense.amount} 
                    date={expense.date} />
                ))}

화살표 함수 뒤에 중괄호가 아닌 그냥 괄호인것도 의외다

여기서 리액트는 멍청하게 리스트의 길이와 만든 컴포넌트의 갯수만 같으면 같다고 생각하기 때문에 이것을 구분할 수 있게 고유값을 넣어줘야 제대로 랜더링한다.

{props.items.map((expense) => (
                    <ExpenseItem 
                        key={expense.id} 
                        title={expense.title} 
                        amount={expense.amount} 
                        date={expense.date}/>
                ))}