상태 가져오기

Stackflow의 내부 상태는 한마디로 표현하면, 전환 상태를 가진 스택 자료구조에요.

activities 필드로 접근할 수 있는 액티비티는 기본적인 존재와 관련된 정보 이외에, ID, 이름, 그리고 현재 시점의 전환 상태 등의 상태값들을 가져요. 이러한 상태값들을 이리저리 활용해 @stackflow/plugin-basic-ui가 만들어졌답니다. (여러분도 충분히 만들 수 있어요!)

스택 상태를 렌더링에 활용하기#

스택 상태를 UI 컴포넌트에서 가져오려면, useStack() 훅을 활용해요.

/**
 * MyActivity.tsx
 */
import { ActivityComponentType, useStack } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

const MyActivity: ActivityComponentType = () => {
  const stack = useStack();
  const { replace } = useFlow();

  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };

  useEffect(() => {
    console.log("현재 쌓여진 액티비티들:", stack.activities);
    console.log("전체 전환 상태:", stack.globalTransitionState);
    console.log(
      "초기에 설정된 Transition Duration 옵션",
      stack.transitionDuration,
    );
  }, [stack]);

  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};

export default MyActivity;

스택 상태에는 다음과 같은 필드들이 존재해요.

액티비티 상태를 렌더링에 활용하기#

현재 액티비티의 정보를 가져오기 위해 useActivity() 훅을 사용할 수 있어요.

/**
 * MyActivity.tsx
 */
import { ActivityComponentType, useActivity } from "@stackflow/react";
import { AppScreen } from "@stackflow/plugin-basic-ui";
import { useFlow } from "./stackflow";

const MyActivity: ActivityComponentType = () => {
  const activity = useActivity();
  const { replace } = useFlow();

  const onClick = () => {
    replace("Article", {
      title: "Hello",
    });
  };

  useEffect(() => {
    console.log("현재 액티비티의 전환 상태:", activity.transitionState);
  }, [stack]);

  return (
    <AppScreen appBar={{ title: "My Activity" }}>
      <div>
        My Activity
        <button onClick={onClick}>Go to article page</button>
      </div>
    </AppScreen>
  );
};

export default MyActivity;

액티비티 상태에는 다음과 같은 필드들이 존재해요.

스택과 액티비티 상태에 대한 이해가 얼추 되셨나요? 그렇다면 이제 @stackflow/plugin-basic-ui를 떼어내고, 나만의 UI를 만들어봐요.