리액트 배열 반복 map() 함수 활용, filter

 

리액트 프로젝트 생성

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

TIL | Warning; arrow function을 사용할 때 return문 작성법

 

벨로그를 참고한 결과

<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>
  );
}