프론트 엔드의 상태(state)에 대해

1. 상태(state)란?

상태는 한국어로 번역하면 잘 와닿지 않을 것이다. 대신 '데이터' 라는 말로 이해하기 쉬울 것이다.

 

객체 지향 프로그래밍에서는 프로그램의 기본 단위가 객체이고, 객체 간의 메시지 상호작용을 통해 프로그램을 구현하게 된다. 이때 객체가 가지고 있는 데이터 또한 상태라고 할 수 있다.

(예를 들어 Employee 클래스를 만든다고 가정하면 Employee의 상태는 name과 age가 될 수 있다.)

 

상태에서 중요한 부분은 바로 값이 변한다는 것이다.

이 값이 변하는데 예측된 값으로 변해야 의도한 대로 동작을 수행할 수 있으니, 예측 범위 내에서 변하게 하는 것이 중요하다. 그래서 그 예측된 범위를 만들기 위해서, 여러 가지 제약조건이나 구조적인 설계를 고민할 수 있을 것이다.

 

또한, 이 상태 관리를 어떻게 하냐에 따라 의미없는 브라우저 리렌더 등 성능 이슈가 생길 수 있고, 어떤 상태 관리 라이브러리를 사용하고 어떤 구조로 상태를 설계해서 다루냐에 따라서 유지보수 관점에서 코드의 라이프 사이클에 영향이 끼친다.

상태 설계는 만드는 개발자마다 중요하게 생각하는 지점이 갈릴 수도 있고 한번 설계되면 프로젝트를 새로 만들지 않는 이상 고치기가 쉽지 않아서 깊은 고려를 하고 시작해야 되는 부분이다.

 

 

이러한 상태 관리 라이브러리 종류에는 다음과 같은것들이 있다.

• Redux
• Mobx
• React Context

그렇다면 상태 관리란 무엇일까?

 

2. 상태 관리란?

상태 관리 개념은 프론트 엔드에서 자주 사용되며 백엔드 개발자에게는 다소 생소할 수 있다.

예를 들면 데이터에 맞춰 적절하게 UX와 UI를 설계하고 구현하는 것이 바로 상태 관리의 일종이다.

 

1. 데이터가 변할 때마다 데이터에 관련된 DOM을 일일이 찾아서 조작하고 싶지 않다면

2. 전체 데이터의 형태와 리스트를 한 곳에서 효율적으로 관리하고 싶다면

 

프론트엔드 개발자는 구현시 상태 관리에 대해 깊게 고민해봐야 한다.

 

---

 

 

아래는 인스타그램을에서 상태관리가 이루어지는 부분들의 몇가지 예를 살펴보자.

 

 

1. 팔로워

출처: 리오넬메시 인스타그램

팔로워 수가 많지 않았다면 표기하는데에 문제될 것이 없었을 것이다. 하지만 3.8억을 380000000이라고 표현하는 것은 읽기도 힘들 뿐더러 너무 길어서 UI가 틀어질 수도 있다. 이를 방지하기 위해 큰숫자는 단위별로 끊어서 위와 같이 간략하게 표현하는 게 더 직관성 있고 올바른 UI설계가 될 수 있다.

 

→ 팔로워 상태에 따라 UI가 동적으로 변한다. 팔로워 수 표기의 상태관리이다.

 

 

 

2. 게시물

게시물 리스트는 모두 비슷한 모양을 하고 있지만, 사진이 여러 장인지, 동영상인지 여부에 따라 아이콘을 각각 다르게 보여준다. 이는 컴포넌트를 만들어 두고, 게시물 상태에 따라 UI가 다르게 반응한 경우이다.

 

 

 

3. 알림

지인에게 다이렉트 메시지가 와서 실시간으로 알림이 표시되는 경우에도 상태 관리가 이루어진다.

 

 

 

 

4. 에러 예외 상황

인터넷 연결이 끊겼을 때와 같이 빨간색 알림 영역이 생기고, 에러상황에 대한 문구가 표시된다. 개발 시 예외처리는 매우 중요하다. 이와같이 상태 관리는 예외적으로 발생할 수 있는 경우를 고려해서 적절한 피드백을 주기 위해 사용하기도 한다.

 

 

 

3. 프론트엔드 개발자로서의 시사점

• 프론트엔드에서 상태관리는 한 곳에서 하면 효율적이다.
• 보통은 최상위 컴포넌트나 storage를 따로 두어 관리한다.
• 자식 컴포넌트들은 최상위 상태를 가지고 있는 개체로부터 상태를 받아 render해주는 역할을 한다.

최근 프론트엔드 개발의 기본 단위는 재사용 가능한 컴포넌트이다. 이 컴포넌트 간의 상태의 공유 여부로 지역적 상태(local state) 또는 전역적 상태(global state)를 적절히 구분해서 설계해야 한다. 또한 상태는 일관적인 형태를 유지해서 무결성을 지켜야 한다.

 예를 들어서 팔로워 수를 표시하는 화면이 3군데 있다고 가정해보면, 상태가 일관적이지 않으면 3화면 다 다른 팔로워 수를 표시할 수 있다. 팔로워가 실시간으로 증가했으면 세 화면 다 같은 데이터를 보여주어야 한다.

 

또한 상태를 어디에 어떻게 저장하고 사용할 것인지도 중요한 문제이다. 상태 공유 여부에 따라 전역적으로 redux나 vuex같은 스토어에 저장하던지, 브라우저가 꺼져도 상태가 유지되도록 브라우저의 쿠키(Cookie) 또는 로컬 스토리지(localStorage)에 저장하는 것도 고려할 수 있다. 심지어 URL의 상태 값을 포함시켜서 관리도 가능하다.

 

 

---

#References

https://www.stevy.dev/react-state-management-guide/

https://hanamon.kr/%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EB%8F%84%EA%B5%AC-%ED%95%84%EC%9A%94%EC%84%B1/

https://geniee.tistory.com/34