728x90
리액트 프로젝트 생성
npx create-react-app frontend
cd frontend
npm start
<ExpenseItem
title={props.items[0].title}
amount={props.items[0].amount}
date={props.items[0].date}
/>
<ExpenseItem
title={props.items[1].title}
amount={props.items[1].amount}
date={props.items[1].date}
/>
<ExpenseItem
title={props.items[2].title}
amount={props.items[2].amount}
date={props.items[2].date}
/>
<ExpenseItem
title={props.items[3].title}
amount={props.items[3].amount}
date={props.items[3].date}
/>
반복된 컴포넌트
중괄호 { } 내에서 map을 통해 반복
{
(props.items.map(expense =>
<ExpenseItem key={expense.id} title={expense.title} amount={expense.amount} date={expense.date}/>))
}
index 에는 예상치 못한 에러를 발생할 수 있기때문에
db에서 받은 id를 key값으로 설정하는 것이 좋음
리스트를 변수로 관리, 동적(조건부) 렌더링
let expensesContent = <p>No expenses found.</p>;
if(filteredExpenses.length > 0){
expensesContent = filteredExpenses.map((expense)=>(
<ExpenseItem
key={expense.id}
title={expense.title}
amount={expense.amount}
date={expense.date}/>
));
}
---
map 사용 주의
Array.prototype.map() expects a return value from arrow function.
경고문 에러로 화면에 출력이 제대로 안되는 현상이 발생했습니다.
https://velog.io/@ylyl/TIL-Warning-arrow-function-return-value
벨로그를 참고한 결과
<Container>
<Row>
{
// => 이후 ( 소괄호 O, 중괄호 X
todos && todos.map((todo,index)=>(
<Col md={4} key={index}>
{/* 컴포넌트 호출 */}
<TodoItem key={todo.num} todo={todo} deleteTodo={deleteTodo}/>
</Col>
))
}
</Row>
</Container>
map 을 사용할 때 return이 아니면 반복문을 쓸 때 소괄호를 사용해야함.
filter()
// 필터를 통한 배열 생성
const filteredExpenses =props.items.filter(expense =>{
return expense.date.getFullYear().toString() === filteredYear;
});
return (
<Card className="expenses">
<ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler} />
{
filteredExpenses
.map(expense =>
<ExpenseItem
key={expense.id}
title={expense.title}
amount={expense.amount}
date={expense.date}/>
)
}
</Card>
);
}
'Front-end > React\RN' 카테고리의 다른 글
리액트 자식 대 부모 컴포넌트 통신 (0) | 2022.12.08 |
---|---|
리액트 state 상태 저장, 업데이트 (0) | 2022.12.08 |
리액트 Fetch API 와 axios 를 통해 서버와 통신하기 (0) | 2022.06.16 |
리액트 Movie API를 활용한 영화 목록 사이트 (2) | 2022.06.07 |
리액트 to-do-list 흐름 파악 (0) | 2022.06.05 |
댓글