리액트에서 데이터가 변할때, 화면을 다시 렌더링해주기 위해서는 React state라는 개념을 알아야 한다.

React state

객체이다.

컴포넌트의 렌더링 결과에 영향을 주는 데이터를 갖고 있는 객체이다. 이 state객체가 변경되면 해당 컴포넌트는 다시 렌더링되도록 되어있다.

state객체는 각각의 컴포넌트 안에서 관리된다…(클래스단위, 함수 단위)

이를 위해서 어떤 컴포넌트의 이전 데이터를 state객체에 넣어놓고(스냅샷 생성) 이후 다시 렌더링이 필요할때는 이 state객체를 변경시켜버리면 된다.

어떻게 보면 변경감지의 개념과도 유사한 듯 하다…

state사용법

App.js의 App클래스에 생성자를 사용한다. 이때 생성자내에 state를 생성하는 부분을 포함시켜서, 클래스 컴포넌트가 생성될때 state객체도 같이 생성되도록 한다.

  constructor(props) {
    super(props);
    this.state = {
      espenses: [
        { id: 1, charge: "점심값", amount: 12000 },
        { id: 2, charge: "교통비", amount: 1500 },
        { id: 3, charge: "커피값", amount: 1400 },
      ],
    };
  }

이 state내에 프로퍼티로 우리가 전에 만든 배열을 넣어준다… 이제 이 배열이 변경되면 state가 변경되고, 변경감지되어서 재 렌더링이 일어나게끔 하는 것이 우리 전략이다.

배열이 state객체에 담겼으므로, 기존의 handleDelete에서 해당 배열을 직접 사용하는 부분도 state를 이용해 사용하도록 바꿔야 한다.

handleDelete = (id) => {
//this.state로 접근한다.
//state의 속성명인 expenses로 접근한다.
    const newExpenses = this.state.expenses.filter((expense) => {
      return expense.id !== id;
    });
    console.log(newExpenses);
  };

💡props로 내려주는 부분도 state를 통해 접근하도록 바꾸자…

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