반응형 개발/React54 Virtual Dom, DOM조작횟수를 줄여서 리렌더링을 줄여보자! Virtual Dom 요약 : 여러번 렌더링할것을 한번에 렌더링한다. SPA로 인해 DOM 복잡도가 증가하고 최적화, 유지보수가 어려워졌다. DOM을 반복 조작할수록 렌더링횟수가 늘어나고, PC 리소스 소모가 많아진다. => DOM 조작횟수를 줄여보자! 이러한 문제점의 해결방안으로 Virtual DOM 이 등장하였다. Virtual Dom의 작동방식을 소개하기에 앞서 브라우저에서의 렌더링 순서를 간략하게 살펴보자. 브라우저의 렌더링 순서 1. HTML을 파싱하여 DOM 트리가 생성되고, CSS를 파싱하여 스타일 규칙이 생성된다. 2. 새로운 렌더트리가 생성된다. 3. 레이아웃과정을 거친다. 레이아웃 과정에서는 각 노드들이 위치해야할 화면의 좌표가 주어진다. 4. 그리기(Painting) : 트리의 각 노.. 2021. 11. 4. 컴포넌트 최적화 : React.memo(), useSelector(callback,equalityFn) 새로 알게 된 것 : 컴포넌트 최적화 React.memo 컴퍼넌트가 React.memo()로 래핑될때 React는 컴퍼넌트를 렌더링하고 결과를 메모이징한다. 그 다음 렌더링의 결과가 이전과 같다면 React는 메모이징 이전 내용을 제시한다. 같은 props로 렌더링이 자주 일어나는 컴퍼넌트 에서는 React.memo를 사용하는 것이 더 좋은 성능을 나타낸다.(불필요한 리렌더링을 줄인다.) 다음을 보자. TodoItem 컴퍼넌트를 다음과 같이 정의한다. function TodoItem({ todo, onToggle }){ return ( onToggle(todo.id)} > {todo.text} ); } 위 영상에서 보다시피 기존에 렌더링되어 있던 TodoItem컴퍼넌트들도 계속 렌더링된다. 이번엔 Tod.. 2021. 10. 17. 번역)Presentational and Container Components Presentational and Container Components Presentational Container 기능 어떻게 보여지는가 어떻게 동작하는가 Redux와 연관성 없음 있음 Read data Props에서 data를 읽는다 Redux의 State에 접근한다. (useSelector) Change data props에서 콜백을 호출 Redux Action 리액트에서 컴포넌트는 상태관리, DOM관리, 이벤트 관리 등 다양한 역할을 하는데, 컴포넌트가 규칙없이 배치되어 있다면 가독성이 떨어지고 관리가 어려워진다. 리액트에서 컴포넌트를 presentational, container 로 나누는 것은 재사용성과 유지보수성을 향상시킬 수 있다. https://medium.com/@dan_abramov/.. 2021. 9. 27. Styled-Component에 hover 간단하게 넣는 법 Styled-Component에 hover 간단하게 넣는 법 hover는 element에 마우스를 올렸을때 일어날 반응을 의미한다. 한편 styled-component는 css를 js에서 사용할 수 있게 하는 라이브러리이다. 그럼 styled-component에서 hover 간단하게 넣는법을 알아보자. import styled from "styled-components"; const Button = styled.button` &:hover{ background-color : skyblue; color : blue } `; &:hover에서 &는 자신, 그러니까 Button을 의미한다. 이는 css-in-js인 styled-component가 css로 컴파일 될 때 외부선택기로 대체되어 다음과 같이 컴파일.. 2021. 9. 14. 이전 1 ··· 10 11 12 13 14 다음 반응형
