가이드
상태 가져오기

상태 가져오기

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;

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

필드 이름설명타입
stack.activities액티비티 목록Activity[]
stack.transitionDurationstackflow()에서 설정한 transitionDurationNumber
stack.globalTransitionState액티비티가 현재 움직이고 있는지 여부idle, loading

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

현재 액티비티의 정보를 가져오기 위해 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;

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

필드 이름설명타입
activity.id액티비티 IDString
activity.name등록된 액티비티 이름String
activity.transitionState액티비티의 전환 상태enter-active, enter-done, exit-active, exit-done
activity.params액티비티에 전달된 파라미터Object
activity.isActive액티비티의 활성 여부 (exit-active 일때 false)Boolean
activity.isTop최상단 액티비티 여부 (exit-active 일때 true)Boolean
activity.isRoot최하단 액티비티 여부Boolean

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