TECH/React (3) 썸네일형 리스트형 [모던리액트] 리액트의 파이버 (Fiber) 리액트의 파이버를 보기 전에 가상 Dom 이란 무엇인지 보고 오시면 더 좋을 것 같아요 ! 리액트의 파이버란?가상 DOM 의 변경 사항을 실제 DOM 에 적용하는 과정을 최적화할 수 있게 해주는 아키텍처 이렇게 정의내리고 싶습니다. 리액트 파이버는 가상 DOM 과 연관이 굉장히 깊은 아키텍처에요.리액트 16 부터 가상 DOM 을 그릴 때 파이버 노드를 이용해서 그리게 되거든요 .. ! 일단, 리액트 파이버에서는 Current Tree / Work In Progress Tree 가 있습니다.(모던 리액트에서는 아마 가장 뒤에 나오겠지만 ... ) - current tree : 실제 Dom과 동일한 형상의 트리, Fiber 노드로 이루어져 있음- work in progress tree : 변경되는 사항.. 말줄임 + hover시 툴팁 표시 컴포넌트 만들기 이런 리스트에서 2줄이 되면서, 툴팁을 표시하는 컴포넌트를 만들 일이 생겼는데 생각보다 이렇게 복잡한 로직이었나? 되돌아보게 되어 정리해보았습니다. ( typescript, Next.js , styled-components를 이용했습니다.) 1. 2줄 말줄임 CSS 먼저, 2줄 말줄임에 대한 CSS 를 정의해주고 적용시켜줄 수 있습니다. text-overflow:ellipsis; overflow:hidden; word-break:break-word ; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; - webkit-line-clamp : 원하는 줄의 단위를 선택할 수 있습니다. 2. 말줄임 확인 말줄임이 된 Item 과 말.. 리액트의 VirtualDom 이 어떻게 실제 DOM 에 반영할까 1 - Diffing 알고리즘 리액트를 사용하시는 이유 중 하나가 가상돔 때문이라고 생각이 드는데, 리액트의 가상DOM 이 실제 DOM과 어떻게 비교를 해서 실제 DOM에 반영을 하는지 궁금해서 찾아보게 된 내용입니다. 이 글을 통해서 왜 리액트에서 Key 를 유니크한 값으로 설정해야하는지에 대해 알게되실 수 있을 것 같습니다 🙏 Heuristic 알고리즘 VirtualDom과 실제 Dom 을 비교할 때 따지고 보면 전체 Dom을 순회하는 것인데 오히려 성능 저하가 일어나지 않을까라는 생각이 듭니다 🤔 이런 고민에 대해 리액트는 휴리스틱 알고리즘으로 해결했습니다. 해결법이 정확히 해결되는가에 대한 문제를 배제하고, 경험과 직관을 통해, 일반적으로 좋은 해결법이나, 보다 간단한 해결법을 찾고자 하는 방법이다. 휴리스틱에 대한 정의가 와.. 이전 1 다음
