컴포넌트 상태 변경

시작하기에 앞서

주의

해당 블로그의 모든 문서는 학습한 내용을 제 방식으로 정리하여 작성하고 있습니다.
순수 창작물도 아니고, 틀린 내용이 있을 수 있으므로 참고하고 읽어주시면 감사하겠습니다.

클래스 컴포넌트 상태 변경

할 일 목록 기능을 구현한다고 했을 때,

특정한 할 일의 삭제 버튼 클릭 시 할 일이 삭제되도록 기능을 구현하려면 상태 변경을 해야 합니다.

먼저 클래스형 컴포넌트의 상태 변경에 대해서 알아보도록 하겠습니다.

class App extends Component {
  todoData = [
    { id: 1, title: "공부하기", completed: true },
    { id: 2, title: "밥 먹기", completed: false },
  ];

  render() {
    return (
      <div>
        {this.todoData.map((todo) => (
          <div key={todo.id}>
            <input type="checkbox" defaultChecked={todo.completed} />
            <span>{todo.title}</span>
          </div>
        ))}
      </div>
    );
  }
}

todoData 리스트를 만들어서 map()으로 할 일 목록을 화면에 그렸습니다.

이에 대해서 자세한 내용은 이전에 작성했던

프로그래밍 > React > map() 사용하기를 참고해주세요.

class App extends Component {
  state = {
    todoData: [
      { id: 1, title: "공부하기", completed: true },
      { id: 2, title: "밥 먹기", completed: false },
    ];
  }

  render() {
    return (
      <div>
        {this.state.todoData.map((todo) => (
          <div key={todo.id}>
            <input type="checkbox" defaultChecked={todo.completed} />
            <span>{todo.title}</span>
          </div>
        ))}
      </div>
    );
  }
}

2번 라인을 살펴보면, 기존의 todoData = [{...}]을 state = {}으로 감싸주었습니다. 상태 변경을 해주기 위해서는 저런 식으로 데이터를 객체로 감싸줘야 하는데, 주의할 점은 필드명을 반드시 state로 해야 한다는 점입니다.

export default class App extends Component {
  state = {
    todoData: [
      { id: 1, title: "공부하기", completed: true },
      { id: 2, title: "밥 먹기", completed: false },
    ];
  }
  handleClick = (id) => {
    const newTodoData = this.state.todoData.filter((todo) => todo.id !== id);
    this.setState({ todoData: newTodoData });
  }

  render() {
    return (
      <div>
        {this.state.todoData.map((todo) => (
          <div key={todo.id}>
            <input type="checkbox" defaultChecked={todo.completed} />
            <span>{todo.title}</span>
            <button onClick={() => this.handleClick(todo.id)}>Delete</button>
          </div>
        ))}
      </div>
    );
  }
}

20번 라인에 Delete 버튼을 하나 추가했고, 버튼을 클릭하면 클릭한 todo의 id 값을 넘겨주는 handleClick()함수를 onClick 이벤트에 등록했습니다.

handleClick()함수는 8번 라인에 화살표 함수로 선언했고, filter() 함수로 Delete 버튼을 클릭한 todo를 제거하여 newTodoData를 만들고 10번 라인을 보면 this.setState() 함수를 사용해서 todoData를 newTodoData로 상태 변경을 해줬습니다.

기존에는 todoData로 화면을 렌더링 되어 있었지만, this.setState()함수로 상태 변경을 해주면 화면이 변경된 newTodoData로 새로 렌더링 되게 됩니다.