처음 html, css ,js공부했을때
복사 붙여넣기 해가면서 만든 코드들을 보며
이걸 어떻게 다 관리해야하나 생각했었는데
요렇게 좋은 라이브러리가 있었다니!
ㅋㅋㅋㅋ모든 이렇게 불편함을 느끼면서 좋은 기술이 생기나봐요😚
그럼 리액트의 컴포넌트와 재사용성에 대해서 정리를 해볼게요 크크😙
Component : 한가지의 기능을 수행하는 독립적인 단위의 모듈.
컴포넌트안에 로직과 state가 들어있고,
독립적이에요!
따라서 한가지의 기능을 수행하기 때문에 재사용이 쉽겠죠?🤩
(쉽게 이해하면 각각의 Component를 부품으로 조립해간다고 생각하면 됩니다!)
(어렸을때 레고 좋아했는데..지금도 좋아햐,, 그럼 리액트도 곧 좋아하게 되겠지..🤭)
리액트 앱은 하나의 컴포넌트로 구성되어 있습니당!
컴포넌트들을 조립해서 구성되어있다는것이죠!
DOM vs Virtual DOM
DOM
브라우저는 Document Object Model 즉 DOM Tree로 이뤄져 있습니다!
html태그들이 dom 으로 변환된다는것이죠!
이때 노드들이 변경되면 웹페이지 전체,일부가 reRendering될 수 있는데
성능저하가 될 수 있어서 비효율적일 수 있어요!
따라서 동적 UI에 최적화 되어있지 않다는것이죠!
(자세한 DOM과 브라우저 Workflow과정은 따로 정리할예정입니당)
React virtual DOM
리액트는 Virtual DOM을 사용합니다!
애플리케이션의 노드트리를 메모리에 저장하고
데이터가 업데이트 되면 virtual DOM에 렌더링합니다
그리고 변경된 내용과 이전 DOM의 내용을 비교합니다.
바뀐 부분만 실제 DOM에 반영이 되는것이죠!
이렇게 간단하게 정리해봤어요!
넘 간단한가요..🤣
그래도 누군가에게 도움이 되길 바라며!
Slow but steady