React State 란?

리액트에서 데이터가 변할 때 화면을 다시 렌더링 해주기 위해서는 React State를 사용해야 합니다.

컴포넌트 랜더링 결과물에 영향을 주는 데이터를 갖고 있는 객체입니다.
State가 변경되면 컴포넌트 리랜더링(Re-rendering)됩니다.
또한 State는 컴포넌트 안에서 관리됩니다.

1. 리액트 State 생성하기

/*before*/
  initialExpenses = [
    { id: 1, charge: "렌트비", amount: 1600 },
    { id: 2, charge: "교통비", amount: 400 },
    { id: 3, charge: "식비", amount: 1200 },
  ];

/*after*/
  constructor(props) {
    super(props);
    this.state = {
      expenses: [
        { id: 1, charge: "렌트비", amount: 1600 },
        { id: 2, charge: "교통비", amount: 400 },
        { id: 3, charge: "식비", amount: 1200 },
      ],
    };
  }

initialExpenses 배열 삭제하고 위 state 생성한다.

2.ExpenseList 태그 수정하기

/*before*/
<ExpenseList initialExpenses={this.initialExpenses} handleDelete={this.handleDelete} />


/*after*/
<ExpenseList initialExpenses={this.state.expenses} handleDelete={this.handleDelete} />

자식 컴포넌트 배열에 보내는 부분도 initialExpenses이 삭제되었으니 변경해줘야한다.

3. handleDelete함수 setState()활용해서 리랜더링 하기

  handleDelete = (id) => {
    const newExpenses = this.state.expenses.filter((expense) => expense.id !== id);
    console.log(newExpenses);
    this.setState({ expenses: newExpenses });
  };

clear-btn 버튼을 클릭하면 클릭한 배열의 id 값과 함수의 id값을 비교해서 다른 배열들만 filter해서 남아있게하고 setState() 함수를 활용해서 삭제한 뒤 화면이 다시 랜더링 돼서 변화를 볼 수 있습니다.