[React] 상태관리 (Local State, Global State, Cross Component State)

 

https://dev.to/oahehc/redux-data-flow-and-react-component-life-cycle-11n

Redux Data Flow and React Component Life Cycle

현대 웹 개발의 흐름은 단순한 웹 페이지를 넘어 웹 애플리케이션을 구축하는 방향으로 나아가고 있다. 이제 브라우저는 단순히 정적인 페이지를 렌더링하는 도구가 아니라. 하나의 애플리케이션의 운영을 돕는 작은 규모의 OS라고 볼 수 있다.

 

웹 프론트엔드는 앱 여러 부분에서 각 요소의 상태를 관리해야 한다. 즉, 유저로부터 입력 받은 상태도 있고, 서버에서 받아온 상태도 있다.

이러한 상태들은 앱 이곳 저곳에 흩뿌려져 있는데, 종종 이 상태들 끼리 정합성이 깨져 있거나 더 이상 유효하지 않은 최신화 되지 않은 정보들이 화면에 표시되기도 한다.

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

상태란, 사물이나 현상이 처해있는 형편이나 모양을 뜻한다. 웹 프론트엔드 개발에 있어서 상태라는 말은 웹 애플리케이션을 렌더하는데 있어 영향을 미칠 수 있는 값으로 말할 수 있다.

 

Javascript Object that influences output of render and is managed within the component

 

공식 문서에 나와있는 상태에 대한 이야기이다. 축약하면 어플리케이션 화면에 영향을 끼치는 자바스크립트 객체 즉, 사용자와의 인터랙션을 통해 동적으로 계속해서 변화하는 데이터이다.

 

16.8 버전부터 등장한 리액트 훅스의 useState가 그 예이다

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count+1)}>
        click me
      </button>
    </div>
  );
}

useState를 이용해서 초기값 0을 가지고 있는 변수 count와 이를 조정할 수 있는 setCount 함수를 반환하고 있다. 여기서 반환된 count 변수가 상태라고 할 수 있다. 브라우저가 렌더될 때 count 값을 반영하며 버튼 엘리먼트의 클릭 여부에 따라 동적으로 변할 수 있는 값이며 동적으로 변화된 값은 결국 브라우저 문서에 반영되어야 한다. 따라서 애플리케이션 렌더링에 영향을 주고 있는 값이라고 볼 수 있다.

문제점이라고 한다면 웹 사이트가 커질수록, 또 복잡해 질수록 이런 상태들은 점점 많아지고, 또 서로 의존하게 되며 관리하기 어려워진다. 만약 서로 다른 여러개의 컴포넌트들이 어떤 동일한 상태를 다루면, 그 데이터의 정확성을 보장하기 위해 데이터의 변경을 제한해 데이터의 상태를 항상 같게 유지해야한다 (props drilling). 이런 데이터의 무결성을 위해 Single source of Truth (신뢰할 수 있는 단일 출처, 즉, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다)라는 방법론이 생겼으며 React에서도 이러한 방법론을 택해서 사용하고 있다.

상태관리는 왜 필요한가?

프로젝트를 진행하다보면 여러 컴포넌트가 공통으로 사용할 상태를 서로 공유해야 할 시점에서 복잡한 구조와 계층이 생성되기 시작한다. 즉, 각 컴포넌트가 부모자식 관계로 되어있지 않은 이상, 각 컴포넌트 간의 직접적인 데이터 전달은 어렵다. 데이터를 부모 컴포넌트로 보내고, 다시 그 상태 데이터를 필요한 컴포넌트로 전달해야 한다. 이러한 상태가 많아지고 어플리케이션이 복잡해 질수록 props drilling으로만 관리하기가 매우 어려워진다.

상태의 종류

상태는 크게 전역상태 (Global State), 지역상태 (Local State), 그리고 컴포넌트 간 상태 (Cross Component State) 세가지로 나눌 수 있다. (보통 From 데이터들이 지역상태에 속한다)

 

지역상태는 특정 컴포넌트 안에서만 관리되는 상태를 뜻한다. 다른 컴포넌트들과 데이터를 공유하지 않는다.

 

컴포넌트 간 상태는 여러가지 컴포넌트에서 관리되는 상태를 나타낸다. 다수의 컴포넌트에서 쓰이고, 또 영향을 미치는 상태를 뜻한다. 프로젝트 곳곳에서 쓰이는 모달을 예로 들 수 있다. 보통 상위 컴포넌트에서 하위 컴포넌트로 prop을 넘겨 해당 컴포넌트까지 전달되도록 하는 Prop Drilling 방식을 필요로 한다

 

전역상태는 프로젝트 전체에 영향을 끼치는 상태이다. 예를 들면, 유저 기능을 생각하면 된다. 이 또한 Prop Drilling 방식을 활용해서 부모에서 자식으로 데이터를 전달한다.

 

여기서 말하는 Prop Drilling이란, props를 오직 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트를 거치며 컴포넌트에서 다른 컴포넌트로 데이터를 전달하는 과정이다.

 

그렇다면 지역 상태가 아닌 전역 상태로 핸들링을 해야하는 것이 항상 좋다고 말 할수 있을까? 대답은 꼭 그렇지는 않다. 그렇다면 상태 관리를 어떻게 하는 것이 좋은지 공식문서를 보자

• 기본적으로 일반적인 경우에는 지역 상태로 데이터를 관리하는 것을 권장한다.
• 지역 상태로 데이터를 관리 시 다수의 컴포넌트 간에 상태 의존성이 높아진다면 전역 상태로 데이터를 관리하는 것을 권장한다.
• 전역 상태 관리 시 서버에서 가져오는 데이터(DB)와, 단순하게 UI 상태를 나타내는 데이터는 분리하여 다룬다.
• 서버 데이터 캐싱 시 전역 상태로 다루면 안된다. 서버 상태를 관리하려면 ,SWR이나 React-Query 와 같은 서버 캐싱 전용 라이브러리를 사용하는 것을 권장한다.

 

출처 : 아래의 사이트들을 보면서 큰 공부 하였습니다

https://han-py.tistory.com/487

https://mingule.tistory.com/74

https://velog.io/@longroadhome/FE-리액트-상태관리-1부

https://reactjs.org/docs/faq-state.html