✏️ React Native FlatList 깜빡임(Flickering) 현상, 왜 생기고 어떻게 해결할까

[BangDori]

내용 (한줄 요약)

React의 재조정 알고리즘과 React Native FlatList의 가상화에 대해 알아보기

예상 독자

가상화가 적용된 무한스크롤에서 깜빡임 현상이 발생하는 원인과 해결 방법을 알고 싶은 개발자

블로그 링크

https://bangdori.kr/posts/virtualization-flickering/

[asuan99]

문장 구성은 일관적으로 작성됐으나, 문제와 인과를 줄글로 이어풀어주는 과정에서 블로그의 이점을 잘 살리지 못한 것 같습니다. 이를 조금 더 강조할 필요가 보입니다.

최첨단의 알고리즘? Reconciliation의 일부를 말하는 것 같은 데 명확하게 나타낼 필요가 있을 것 같습니다. 블로그는 보는 시점이 항상 동일한 시점이 아니기 때문에, 최첨단이라는 표현은 지양했으면 좋을 것 같습니다.

2-1, 2-2 에 대해서 단락 구성을 이렇게 제시한 이유를 잘 모르겠습니다.
본래 저자의 의도는 2-1의 내용을 보충 설명하는 비교 알고리즘에 대해 2-2에서 추가 설명하는 것처럼 느껴집니다만, 2-2가 일종의 하위 구성인 것처럼 보입니다.

추가적으로 고려할 수 있는 사항을 3장을 통해서 보여줌으로, 독자에게 어떤 방향성을 갖고, 추가적인 성능 향상을 위한 노력을 할 수 있을 지 고려할 수 있을 것 같아 독자에게 추가적인 성능 향상의 기회를 얻을 수 있을 것 같습니다.

[BangDori]

@asuan99

• 말씀처럼 최첨단이라는 표현은 지양하는 게 좋을 것 같네요. 감사합니다!
• 2-2가 2-1의 하위 구성이 맞습니다..ㅎㅎ 근데 하위 구성이 너무 깊어지게 되는 것 같아서 일부러 분리해뒀는게 딱 걸려버렸네요. 그리고 굳이 2-1과 2-2를 분리할 필요도 없을 것 같네요..! 2-1로 통일하겠습니다.

문장 구성은 일관적으로 작성됐으나, 문제와 인과를 줄글로 이어풀어주는 과정에서 블로그의 이점을 잘 살리지 못한 것 같습니다. 이를 조금 더 강조할 필요가 보입니다.

어떤 식으로 강조해야 할 지 아직 명확하게 파악되지 않는데 조금 더 상세한 설명을 부탁드려도 될까요?

[psychology50]

At first, I found it easy to understand because of the many images included, even though I only know the basics of React.

I try to use bullet points when explaining "sequence" instead of writing the content in a continuous paragraph.
Especially in sections like Unit 2, where flow is explained, it could be more effective, although this might depend on personal preference.

For your information, when listing features that don’t require a sequence, like in 2-1, I prefer using • 🤗

Now, a few questions.
Where is it documented that React behaves this way (with or without keys)? Could you share a specific link?
Is there a reason why the post doesn’t include test results (e.g., logs) to demonstrate this behavior? Is it because the main goal is to explain the comparison algorithm rather than show the outcome?
If this wasn’t considered, showing how all child nodes are regenerated during execution (with code) might make it clearer.
It could feel like more empirical evidence, especially for React beginners like me! 😊

Lastly, I just have to say—your blog theme is so clean and visually appealing that I feel like copying it. 😆
I only knew that keys needed to be set, but learning that they affect performance was new and fascinating to me. I really enjoyed reading this!

---

우선 사진이 많아서, 리액트 기초밖에 모르는 저조차도 내용을 쉽게 이해할 수 있었습니다.

이건 저도 블로그를 쓸 때 항상 신경쓰려고 노력하는 부분인데, "순서"를 이야기할 때는 단순히 풀어 쓰는 것보다 글머리 기호를 쓰면 보다 가독성이 높아진다고 생각합니다.
특히 2번처럼 플로우를 설명하는 글에선 더더욱 효과가 좋을 것이라 생각합니다만, 개인 기호 차이일 수도 있습니다.

참고로 2-1처럼 순서가 필요없는 특징을 열거할 땐, 저는 •를 즐겨씁니다. 🤗

이건 궁금한 건데, key를 지정하지 않았을 때와 지정했을 때 실제로 위와 같이 동작한다는 것은 어디 나와 있나요? (어느 링크 확인해봐야 하는 건지 모르겠어용..)
이를 굳이 테스트 결과(ex 로그)로 보여주지 않는 것은, 해당 포스트가 비교 알고리즘을 알려주는 것이 주 목적이 아니기 때문인가요?
만약 고려하지 못 했던 거라면 그림도 좋지만, 실제로 코드를 실행했을 때 모든 자식 노드가 재생성되는 것을 코드로 보여주는 것도 좋을 것 같습니다.
그럼 보다 실증적인 자료라고 생각할 수 있을 것 같아요! (저 같은 리알못 기준)

블로그 테마 손민수해가고 싶을 정도로 깔끔하네요. 😆
단순히 key를 설정해야 한다고만 알고 있었는데, 성능에 영향을 준다는 건 처음 알아서 재밌게 읽었습니다~~

[BangDori]

@psychology50

우선 사진이 많아서, 리액트 기초밖에 모르는 저조차도 내용을 쉽게 이해할 수 있었습니다.

이건 저도 블로그를 쓸 때 항상 신경쓰려고 노력하는 부분인데, "순서"를 이야기할 때는 단순히 풀어 쓰는 것보다 글머리 기호를 쓰면 보다 가독성이 높아진다고 생각합니다.
특히 2번처럼 플로우를 설명하는 글에선 더더욱 효과가 좋을 것이라 생각합니다만, 개인 기호 차이일 수도 있습니다.

참고로 2-1처럼 순서가 필요없는 특징을 열거할 땐, 저는 •를 즐겨씁니다. 🤗

감사합니다! 다음부터 이야기를 단순 플어쓰기보다는 글머리 기호를 적극 활용해볼게요!!

키를 지정한 경우와 지정하지 않은 비교 영상에 대한 코드를 추가하자니 영상과 코드의 양이 너무 방대해져 영상 자료만 추가하였는데, 리뷰어님이 말씀해주신 것처럼 실제로 키가 적용되었을 때 동작하는 것이 맞는가?에 대한 의문이 저도 들기는 하네요... (심지어 React Native에서 시각적으로 확인하는 가상화에서 영상 링크를 잘못 걸어서 깨져있었군..요 🥲)

후다닥 수정해보겠습니다~~ 상세한 리뷰와 번역까지! 감사합니도르 ㅎㅎㅎ

[asuan99]

@BangDori
특징이나 인과를 열거할 때 bullet 포인트를 통해서 내용의 순서를 맞춰주는 게 중요합니다. 제가 논문과 같은 글을 많이 읽을 때는 이런 bullet 포인트를 활용하거나, 글의 색상을 활용해서 강조하는 글을 작성하기 힘들지만, 블로그를 작성할 때는 이런 bullet 포인트와 글의 색상을 통해서 강조를 추가하는 게 좋아보입니다.