State

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

• 컴포넌트 내부에서 데이터를 전달하기 위해 사용

리액트 State 사용하기

import React, { Component } from "react";

export default class State extends Component {
  state = {
    data: [
      {
        id: 1,
        name: "Kim",
      },
      {
        id: 2,
        name: "Lee",
      },
      {
        id: 3,
        name: "park",
      },
    ],
  };

  delete = (id) => {
    let newData = this.state.data.filter((data) => data.id !== id);
    this.setState({ data: newData });
  };

  render() {
    return (
      <div>
        {this.state.data.map((data) => (
          <div key={data.id}>
            {data.name}
            <button
              onClick={() => this.delete(data.id)}
              style={{ marginLeft: "10px" }}
            >
              삭제
            </button>
          </div>
        ))}
      </div>
    );
  }
}

위처럼 react에서 state를 사용하려면 this.state로 사용해야한다.
state의 값을 변경하기 위해서는 setState를 통해 값을 변경한다.

위에서 id를 key값으로준 이유

key값이 없거나 같은 값이 들어갈 경우

위와 같은 오류가 발생하게 된다.

오류가 발생하는 이유

react는 필요한 부분만 렌더링 한다. 이때 변경된 Element를 발견하고 수정해야 하는데 key값이 없을 경우 react가 인식하지 못하고 전체를 다시 렌더링 하기 때문에 key값을 주어야 한다.