상태 관리를 알아야 하는 이유

• 데이터가 변할 때마다 데이터에 관련된 DOM을 일일히 찾아서 조작하고 싶지 않다면
• 전체 데이터의 형태와 리스트를 한 곳에서 효율적으로 관리하고 싶다면

상태란

객체지향 프로그래밍에서 기본 단위가 객체이고, 객체간의 상호작용을 통해 프로그램이 동작되는데, 이 때 객체가 가지는 데이터를 상태라 할 수 있습니다.

아래 ToDo List 예제를 통해 상태에 대해 알아봅니다.

위 ToDo List앱이 가져야 할 상태는 바로 todoitems 입니다.

그런데 이 데이터를 여러군데에서 관리한다면 무결성을 가져가기 힘듭니다.

다음으로 위 화면UI를 컴포넌트 형태로 더 분리해서 살펴 보겠습니다.

위와같이 컴포넌트를 분리하게되면 TodoApp이라는 컴포넌트 내에 TodoInput, TodoList, TodoCount 컴포넌트들이 포함되어 있습니다. 이렇게 분리한 상태에서 데이터를 한 곳에서 관리한다면, TodoApp 컴포넌트에서 하고, 다른 컴포넌트들은 그 데이터를 받아와서 보여주기만 한다면 데이터를 일괄되게 관리하기 편해집니다.

그래서 자주 사용하는 패턴이 setState와 render 함수의 구현입니다.