개요

React #2 Advent Calendar 2019의 15일째 보도.
이 글은 최근에 처음으로 React를 사용하여 전단 개발을 진행한 서버 측 중심의 엔지니어인 필자가 React가 전단 개발에 가져온 공적을 해석하면서'상태 관리'를 설명한다.
여기에는 Flux, Redux, React Hooks 등의 상태 관리 방법이 언급되지 않습니다.
차라리 "왜 앞에 이런 도구가 필요합니까?"이 점에 초점을 맞춰 쓰면 엔지니어 초보자와 엔지니어 이외의 사람도 읽을 수 있는 내용을 목표로 한다.
(앞부분 초보자가 말하면 단어의 불일치와 해석이 다를 수 있습니다. 죄송합니다. 이런 상황에서 지적할 수 있다면 다행입니다.)

목표 독자

최근에 전방에 배치되어 개발은 잘 되었지만 상태 관리의 엔지니어라고 불린다

TL,DR

상태 관리란 무상태 UI를 설치할 때 반드시 발생해야 하는 "그럼, 어디에 상태가 있습니까?"의 주제입니다.(도대체 필자의 해석이다.)

SPA 개발의 복잡성은 "상태" 에 의해 발생한다

사용자 브라우저에서 사용자 인터페이스의 SPA 동적 변경

최근 프론트 엔드 개발의 추세는 SPA(싱글 페이지) 입니다.
이는 HTTP 요청을 인수로 템플릿 엔진을 사용하여 데이터가 포함된 HTML을 반환하는 기존의 함수식 UI 구축과 달리 사용자의 브라우저에서 동적 UI가 지속적으로 변화하는 UI 상태 마이그레이션 문제로 인해 개발자가 직면하게 됩니다.예를 들어, UI 마이그레이션은 다음과 같습니다.

비동기식 서버 데이터 가져오기

폼의 실시간 검증

페이지 내 레이블 전환

UI 상태 변환이 왜 복잡한가

그렇다면 UI의 지속적인 동적 변화는 어떤 복잡성을 초래할 것인가.
이는 "UI를 변경하려면 이전 DOM 상태에서 계속 손을 물어야 하기 때문"이다.
예를 들어 바닐라 JS에서 서버에서 비동기적으로 데이터를 얻어 표시한 샘플 구현을 살펴보자.

// APIからデータを取ってくる
const getTodoList = async () => {
  return ["遊ぶ", "買い物", "宿題"];
};

const container = document.getElementById("todo-list");

// ローディング画面を表示
const loading = document.createElement("div");
loading.textContent = "loading";
container.appendChild(loading);

getTodoList().then(todoList => {

  // ローディング画面を削除
  container.removeChild(loading);

  todoList.forEach(todo => {
    const dom = document.createElement("li");
    dom.textContent = todo;
    container.appendChild(dom);
  });
});

번거로운 것은 로드 화면에서 실제 TODO 목록을 볼 때 로드 화면을 삭제해야 한다는 것입니다.또한<div id="todo-list" />에 TOD 목록이 표시되지만 DOM에 보장되지 않습니다.SPA 개발에서 UI의 전제는 비동기적인 처리를 통해 자주 현란한 변화가 일어나기 때문이다.
이전 DOM에 항상 손을 넣은 상태에서는 DOM의 덧셈과 뺄셈을 강제합니다.바로 UI와 논리가 긴밀하게 결합된 상태입니다.

React는 복잡성과 태그를 완전히 분리하는 데 성공했습니다.

이 복잡성을 해결한 것은 React(최근의View 라이브러리 등)입니다.
React는 개념적으로 Declarative(선언성), https://reactjs.org/）
UI 구축은 다음과 같은 예에서 "데이터를 HTML로 변환하는 함수"로 이루어집니다.

// APIからデータを取ってくる
const getTodoList = async () => {
  return ["遊ぶ", "買い物", "宿題"];
};

// カスタムフック
const useTodoList = () => {
  const [state, setState] = React.useState<string[] | null>(null);
  React.useEffect(() => {
    getTodoList().then(todoList => {
      setState(todoList);
    });
  }, []);
  return state;
};

function App() {
  const state = useTodoList();
  // データがまだ取得できていないならローディング、取得できているならそれを表示する関数
  return <ul>{state ? state.map(e => <li>{e}</li>) : "Loding"}</ul>;
}

선언적인 UI 구축?

React가 제시하는 UI 구축의'선언성'은 무엇입니까?앞에서 설명한 바와 같이'데이터를 HTML로 변환하는 함수'로 해석할 수 있습니다.
즉, 태그를 지정할 때 인수에 제공된 현재 데이터를 HTML로 표현하는 방법입니다.구현에만 초점을 맞추면 됩니다. 과거에 DOM이 어떤 상태였는지, 이러한'UI의 상태 이동'은 신경 쓸 필요가 없습니다.

문제는 UI의 상태 이동에서 데이터의 상태 이동으로 변경됩니다.'상태 관리'라는 단어가 됐어요.

태그는 사용자 인터페이스 상태 변환에서 해방되어 더욱 간단해졌다.
그러나 이것은'표시'에서'상태'를 분리할 뿐 전단은'상태'에서 해방되지 않는다.데이터 상태 변환은 여전히 고민입니다.
앞부분 부근에서'상태 관리'라는 단어로 그 문제를 주제화하고 Flux와 Redux 등의 상태 관리 도구가 탄생했다.

후기

여기에 이 기사에 다 쓸 수 없는 감정적인 부분을 더해 다시 투고했다.
https://zenn.dev/gagaga/articles/state-management