상태란 무엇이고 왜 상태관리를 할까요?

https://www.youtube.com/watch?v=G49oNOa8hFI 

프론트엔드에서 상태란 무엇인가?

• 먼저, 상태의 뜻에 대해 알아보면 상태란, 사물이나 현상이 처해있는 형편이나 모양을 뜻합니다. 이것만 보면 사실 감이 잘 안옵니다.
• 우리가 일상생활에서 접하는 다양한 화면들을 떠올려보며 상태란 무엇인가에 대해 생각해보겠습니다.

• 요약) State는 plain Javascript Object that influences output of render and is managed within the component.
• 상태는 컴포넌트 내부에서 관리되며 어플리케이션의 렌더에 영향을 미치는 플레인 자바스크립트 객체입니다.
• 공식 문서에 나와있는 상태에 대한 이야기인데, 축약하자면 "어플리케이션의 화면에 영향을 끼치는 자바스크립트 객체" 라고 보아도 무방합니다.
• 보통은 이를 통칭해 "변화하는 데이터" 라고 일컫습니다.
• 사용자와의 인터랙션을 통해 동적으로 계속해서 변화하는 데이터입니다.
  • 내가 쓱닷컴에서 어떤 물건을 장바구니에 담고, + 버튼을 눌러 수량을 변경했을 때, 1개에서 2개로 변하는 것,
  • 인스타그램에서 내가 누군가를 팔로우했을 때, 팔로워 수가 1이 증가하는것
  • 모두 상태가 변화하는 것이라고 부를 수 있습니다.
• 이렇듯 우리는 정말 많은 곳들에서 이런 상태들을 알게모르게 변화시키고있습니다.
• 웹 사이트가 커질수록, 또 복잡해질수록 이런 상태들은 점점 많아지고, 또 서로 의존하게되며 관리하기 어려워집니다.
• 단순히 인스타그램의 내 피드에만 들어가봐도, 정말 많은 상태들이 관리되고 있는 것을 알 수 있습니다.
• 내 인스타 아이디, 내가 팔로잉하는 사람들 수, 나의 팔로워 수, 내 피드에 공유된 포스트들, 스토리들, 알림 등.. 정말 많습니다.
• 이런 상태들은 일관적이어야합니다. 어떤 말이냐면, 서로 다른 컴포넌트에서 동일한 상태를 다룬다면, 그 출처가 같아야한다는 것입니다.
• 예를 들어, 인스타 피드에 공유된 포스트들을 보여주는 컴포넌트가 있고, 그 포스트들의 개수를 나타내주는 컴포넌트가 있다고 하자.
• 두 가지 컴포넌트 모두 결국 "내가 올린 포스트"라는 데이터를 가져와 사용합니다.
• 만약에 내가 새로운 포스트를 하나 올렸을때 피드에 보여지는 포스트는 11개인데, 그 개수를 나타내는 컴포넌트는 10개를 나타낸다면, 나는 혼란을 느낄 것입니다.
• "제대로 올라간게 맞나?!! 뭘 믿어야하지?!"
• 그렇기 때문에 상태의 일관성, 즉 데이터의 무결성은 정말 중요합니다.
• 만약 서로 다른 여러개의 컴포넌트들이 어떤 동일한 상태를 다루면, 그 데이터의 정확성을 보장하기 위해 데이터의 변경을 제한해 데이터의 상태를 항상 같게 유지해야합니다.
• 이런 데이터의 무결성을 위해 Single source of Truth(신뢰할 수 있는 단일 출처, 즉 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다)라는 방법론이 생기기도 했고, React에서도 이 방법론을 택해서 사용하고 있습니다.
• 우리가 useState를 통해서만 state를 변경시켜야하는 이유를 여기에서 추측할 수 있습니다.

상태의 종류

• 상태는 크게 범위의 개념에서 전역상태(Global State)와 컴포넌트 간 상태(Cross Component State), 그리고 지역상태(Local State), 세가지로 나눌 수 있습니다.
• 지역상태는 특정 컴포넌트 안에서만 관리되는 상태를 뜻합니다.
  • 다른 컴포넌트들과 데이터를 공유하지 않습니다.
  • 예를 들면, input, selectbox 등에서 사용자의 입력값을 받는 경우가 있습니다. (보통 Form 데이터들이 지역상태에 속한다.)
• 컴포넌트 간 상태는 여러가지 컴포넌트에서 관리되는 상태를 나타냅니다.
  • 다수의 컴포넌트에서 쓰이고, 또 영향을 미치는 상태를 뜻합니다.
  • 프로젝트 곳곳에서 쓰이는 모달을 예로 들 수 있습니다.
  • 보통 상위 컴포넌트에서 하위 컴포넌트로 prop을 넘겨 해당 컴포넌트까지 전달되도록 하는 Prop Drilling 방식을 필요로 합니다.
• 전역 상태는 프로젝트 전체에 영향을 끼치는 상태입니다.
  • 예를 들면, 유저 기능을 생각하면 됩니다.
  • 이 또한 Prop Drilling 방식을 활용해서 부모에서 자식으로 데이터를 전달합니다.
• Prop Drilling이란, props를 오직 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트를 거치며 컴포넌트에서 다른 컴포넌트로 데이터를 전달하는 과정입니다.
  • [상위 컴포넌트 > 중간 컴포넌트 > 중간 컴포넌트 > ... > 타겟 컴포넌트] 이런 식입니다.
• 이런 prop 전달 과정이 많지 않다면 큰 걱정은 없지만, 만약 어플리케이션이 커져서 정말 많은 과정을 거치게 되어야 한다면, 그 코드의 prop을 추적하기는 정말 힘들 것입니다.

상태관리는 왜 필요한가?

• 서로 다른 두 컴포넌트에 같은 데이터가 필요하다고 할 때, 각 컴포넌트가 부모자식 관계로 되어있지 않은 이상, 각 컴포넌트 간의 직접적인 데이터 전달은 어렵습니다.
• 데이터를 부모 컴포넌트로 보내고, 다시 그 데이터가 필요한 컴포넌트로 전달해야합니다.
• 하지만 이렇게 Prop Drilling이 많아지면 이 prop이 어디에서 왔는지 확인하기 정말 어려워집니다.
• 물론 상태가 어디에서 왔고, 어디를 거쳐서 어디까지 갔고.. 이런걸 다 기억하고 있을 수 있다면 정말 좋겠지만, 상태가 많아지고 어플리케이션이 복잡해질수록 prop을 추적하기는 점점 힘들어질 것입니다.
• 그렇기때문에 각 어플리케이션에 알맞은 상태관리 툴을 선택해 상태를 잘 관리하는 것이 중요합니다.

참고사이트

https://mingule.tistory.com/74