5. 리스트 렌더링 및 조건부 Content (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

1. 동적 렌더링

map함수 사용하기

정적으로 렌더링중인 ExpensesFilter를 동적렌더링으로 바꾸어보자

  return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChageHandler}
        />
        <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}
        />
      </Card>
    </div>
  );
  
  # Expenses.js

props로 받은 items를 map함수를 이용해 동적으로 렌더링한다.

return (
    <div>
      <Card className="expenses">
        <ExpensesFilter
          selected={filteredYear}
          onChangeFilter={filterChageHandler}
        />
        {props.items.map((expense) => (
          <ExpenseItem
            title={expense.title}
            amount={expense.amount}
            date={expense.date}
          />
        ))}
      </Card>
    </div>
  );
  
  # Expenses.js

---

2. state 저장 목록

그럼 Title, Amount, Date 값을 입력 후 Add Expense버튼을 눌렀을 때 저장된 리스트를 최상단에 위치하게 하려면 어떻게 해야할까?

addExpenseHandler가 실행되면 추가된 expense 의 다음 인덱스 요소로 ...prevExpenses를 할댕해주면 된다.

function App() {
  const [expenses, setExpenses] = useState(DUMMY_EXPENSES);

  const addExpenseHandler = (expense) => {
    // prevExpenses: 이전의 상태값
    setExpenses((prevExpenses) => {
      return [expense, ...prevExpenses]; // 현재의 값을 최상단으로 올리고 하단에는 이전의 값을 배치함
    });
  };
  
  # App.js

ExpenseForm 에서 입력한 값들이 상단으로 추가 된걸 확인할 수 있다.