feat: Add feature makeActivitiesReducers of Popped

[uthem150]

안녕하세요,
Stackflow를 활용한 프로젝트를 진행하면서, 발견한 문제에 대해 확인 요청을 드리고자 pull request를 남기게 되었습니다.

해당 문서 (https://stackflow.so/guided-tour/state) 에서는
stack.activities와 관련하여,

const stack = useStack();
console.log("현재 쌓여진 액티비티들:", stack.activities);

를 통해, 현재 쌓여진 액티비티들을 확인할 수 있다는 부분이 기술되어 있다고 설명하고 있습니다.
이에 따라 액티비티 목록을 출력해보는 작업을 진행하였고, 그 과정에서 이상한 점을 발견하였습니다.

push를 통해 액티비티가 정상적으로 추가되는 것과는 달리,
pop을 했을 때 마지막 액티비티가 여전히 목록에 남아있는 문제인데,

코드를 살펴본 결과, push 및 replace에 대해서는 액티비티 배열이 변경되지만,
pop을 할 때는 현재 쌓여진 액티비티 목록에서 해당 액티비티를 제거하는 로직이 없다는 것을 확인하였습니다.

이러한 문제를 해결하기 위해
아래 코드와 같이, pop할 때 마지막 액티비티가 제거되도록 하는 로직이 필요하다고 생각하여 코드를 수정해보았습니다.

/**
 * Pop the last activity from activities
 */
Popped: (activities: Activity[], event: PoppedEvent): Activity[] => {
  return activities.slice(0, activities.length - 1);
},

(만약 이 로직이 없다면, 배열에서 액티비티가 사라지지 않고 계속 쌓이게 되어, 메모리 문제를 일으킬 가능성도 있습니다고 생각합니다.)

제가 아직 초보 개발자라 잘 모르는 부분이 많은데,
혹시 이 부분에 대해 확인이 가능하실지 알 수 있을까요?
감사합니다.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 098da20

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

Name	Type
@stackflow/docs	Patch
@stackflow/demo	Patch
@stackflow/link	Patch
@stackflow/plugin-history-sync	Patch
@stackflow/plugin-preload	Patch

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
stackflow-docs	✅ Ready (Inspect)	Visit Preview	Oct 4, 2024 7:12am

[tonyfromundefined]

테스트 돌려보시면 사이드 이펙트를 확인하실 수 있을거같네요 ㅎㅎ 아마 깨지는 케이스가 많을거에요 깨지네요.

실제 활성화된 액티비티를 뽑으시려면 activity.transitionState를 확인하시면 됩니다~ 확인해보시고 댓글 남겨주시면 PR은 닫도록 할게요!

[uthem150]

console.log("현재 쌓여진 액티비티들:", stack.activities);
아하 위 코드에서 현재 쌓여진 액티비티들이라는 표현이,

지금 스택에 쌓여있는 액티비티들이 아니라,
이미 pop한 액티비티들도 모두 들어있는 배열이고, 각 액티비티가 활성화 되어있는지는

activity.transitionState를 확인해서,

	const activeActivities = stack.activities.filter(
		(activity) => activity.transitionState === 'enter-active' || activity.transitionState === 'enter-done'
	);

아래와 같은 방식으로 확인할 수 있는거군요..!!
확인했습니다 정말 감사합니다!

그렇다면, 혹시 stack.activities로 확인할 수 있는 배열은
이전에 말씀드린것과 같이, 계속 쌓이기만 한다면,
배열이 너무나 길어지는 문제가 발생할 수 있을 것 같은데, 이에 대해서, 배열도 함께 빼거나 초기화하는 방법이 있을까요?

[tonyfromundefined]

exit-done 액티비티를 유지하는 이유는 "앞으로 가기"를 지원하기 위함인데요. 따라서 exit-done이 일어난 뒤, 다음 push가 일어나면 아래 있는 exit-done에는 접근이 불가해서 해당 부분을 GC 해줄 수는 있을것 같습니다.

[uthem150]

넵 답변해주셔서 정말 감사합니다!