Card 컴포넌트 내부 loading state의 사용이 적용되는 특정 상황이 궁금합니다.

[woochanleee]

배경지식

loading state

initial state -> props.isRoot
Card.tsx#27

loading state가 쓰이는 부분

Card.tsx#193

현재 로직상 loading state가 true일 경우 Card.scss#37를 통해 display: none이 적용되는걸로 확인됩니다.

마운트 시 loading -> false

mount가 될 시 setTimeout(cb, 0)을 통해 loading state를 false로 바꿔주는 모습입니다. Card.tsx#31

궁금증

CardProps.isRoot 가 true일 경우 위와 같은 로직이 적용되는데(isRoot가 false이면 loading도 false이므로 css 미적용 Card.tsx#176) 어떤 특정 상황에서 display: none으로 해당 엘리먼트를 감추었다가 mount시 보여줘야 하는 상황이 오나요?

[tonyfromundefined]

isRoot는 가장 첫번째 스크린인 상황인데요. 가장 첫번째 스크린인 상황에서, <ScreenHelmet />을 사용한 경우 렌더링 타이밍 이슈로 인해서, 상단바가 없는 화면이 먼저 보여지고, 이후에 상단바가 생기는 현상이 발생해요.

• 원하는 Behavior: 한번에 상단바가 띄워진 첫 화면이 보여진다.
• 이슈: 상단바가 없는 화면이 슬쩍 보인뒤에 5~10ms 후 상단바가 등장한다.

따라서 해당 이슈를 해결하기 위해 setTimeout(cb, 0)을 사용했습니다.

다만 저도 해당 이슈에 대해서 setTimeout(cb, 0)은 좋은 해결 방법은 아니라고 생각이 되서, 혹시 더 나은 방법을 제안해주시거나 PR을 주시면 반영해보겠습니다!

[woochanleee]

isRoot는 가장 첫번째 스크린인 상황인데요. 가장 첫번째 스크린인 상황에서, <ScreenHelmet />을 사용한 경우 렌더링 타이밍 이슈로 인해서, 상단바가 없는 화면이 먼저 보여지고, 이후에 상단바가 생기는 현상이 발생해요.

• 원하는 Behavior: 한번에 상단바가 띄워진 첫 화면이 보여진다.
• 이슈: 상단바가 없는 화면이 슬쩍 보인뒤에 5~10ms 후 상단바가 등장한다.

따라서 해당 이슈를 해결하기 위해 setTimeout(cb, 0)을 사용했습니다.

다만 저도 해당 이슈에 대해서 setTimeout(cb, 0)은 좋은 해결 방법은 아니라고 생각이 되서, 혹시 더 나은 방법을 제안해주시거나 PR을 주시면 반영해보겠습니다!

많이 고민해 보았는데 막상 다른 해결책이 떠오르질 않네요. 😓

사실 이 부분의 코드가 어떻게 동작하는지 궁금했던 이유가 사실 따로 있는데요! karrotframe과 keen-slider 라이브러리를 사용하게 될 경우 이슈가 있어 어디가 원인인지 알아보다가 여기까지 오게 되었네요.

제가 파악한 원인은 다음과 같습니다.

1. keen-slider는 내부적으로 첫 렌더링 시 슬라이더로 사용될 element의 offsetWidth 또는 offsetHeight 값을 구해서 다양한 애니메이션 효과를 적용한다.
2. karrotframe은 내부적으로 <ScreenHelmet /> 렌더링 타이밍 이슈를 해결하기 위해 잠깐 동안 display: none; 이 적용되어 children의 offsetWidth, offsetHeight 값이 모두 0으로 바뀐다.
3. 1번, 2번 상황이 겹쳐 keen-slider가 제대로 동작하지 않는다.
4. karrotframe Card.scss#38 스타일 코드를 visibility: hidden;으로 수정하면 element의 크기는 유지하되 <ScreenHelmet />의 렌더링 타이밍 이슈또한 display: none과 동일하게 해결할 수 있다.

제가 정리해본 내용은 위와 같은데, 사실 두 라이브러리의 이슈를 karrotframe에서 해결해야할지 keen-slider에서 해결해야할 지 확신하진 못 하지만 일단은 karrotframe style 코드를 수정해 해결할 수 있다는 경험을 공유하기위해 코멘트 남깁니다.

+) 추후 다른 offsetWidth, offsetHeight를 요구하는 라이브러리와 같이 사용하게 된다면 똑같은 이슈를 겪을 것 같아 visiblity: hidden;으로 수정하는 것이 저는 좋을 것 같다고 생각이 되었는데요, 이에 대해 어떻게 생각하시는지 궁금합니다!

[tonyfromundefined]

loading 상태는 핵심 애니메이션 과정에 포함되지 않아서 저는 좋은 방향인거 같습니다 ㅎㅎ visiblity: hidden; 인 경우에는 말씀해주신 keen-slider가 잘 작동하는 것 확인하신걸까요?

[woochanleee]

loading 상태는 핵심 애니메이션 과정에 포함되지 않아서 저는 좋은 방향인거 같습니다 ㅎㅎ visiblity: hidden; 인 경우에는 말씀해주신 keen-slider가 잘 작동하는 것 확인하신걸까요?

넵! playground에서 수정 후 테스트 해보았습니다. karrotframe 레포지토리가 yarn monorepo로 이루어진것 맞죠? monorepo는 처음이라 실행하는데 약간 익숙치 않았네요. ㅎㅎ

괜찮으시다면 해당 이슈 관련 css 내용으로 PR 날려도 될까요?

[tonyfromundefined]

네네 ㅎㅎ

https://github.com/daangn/karrotframe/blob/master/CONTRIBUTING.md

여기 문서 참조하시면 돼요!

[tonyfromundefined]

0.14.9에 해결되었어요