rendering React에서 Key가 필요한 이유 다음과 같이 map을 통해 리스트를 보여주면 문제가 발생한다. 여기서 고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하면 돼서 불필요한 렌더링을 없애준다. 그러기 위해서는 중복되지 않는 고유한 값을 key 값으로 부여해 주어야 한다. React에서는 key가 동일할 경우 동일한 Dom 요소를 보여주기 때문... ReactkeyDOMrenderingDOM ⛓️ 리액트 렌더링 과정 📍 index.js => App.js => 하위 route로 지정된 컴포넌트들 1. render index.js App.js 상태변화 === 렌더링 된 엘리먼트 업데이트 React의 element는 불변객체이므로 생성 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. - 때문에 컴포넌트에서 새로운 상태가 반환될 때 마다 변경된 부분을 계산하기 위한 과정을 밟는다. 결과적으로 Reac... ReactrenderingReact 어떻게 Virtual DOM은 브라우저 렌더링 횟수를 줄여주는가? virtual DOM의 행동방식을 유사하게 보여주는 사이트도 추천합니다 TLDR : virtual DOM은 replaceChild를 통해서 변경사항을 한 번에 바꿉니다. Virtual DOM은 DOM을 추상화해 어떤 태그, Attribute, Child를 가지는지를 나타낸 트리형태의 자료형이다. Virtual DOM이 DOM Tree의 여러가지 변경 사항이 있을경우 어떻게 렌더링 횟수를 줄여... renderingVirtualDOMReactReact react - start 프론트엔드 3대장이라 불리는 기술 중, 요즘 가장 핫한 react. 이러한 상황은 DOM을 조작하며 프로그래밍을 하게 되면, 소스 코드가 지저분해질 확률이 높고, 이에 따라 유지보수에도 어려움이 생긴다. 이런 문제를 해결하기 위해 많은 기술들이 나오게 되는데, 대표적인 것들이 위에 언급한 프론트엔드 3대장이다. 이 중 페이스북에서 만든 리액트는 가장 많이 사용되고 있으므로 프론트엔드를 지향하... Reactvirtual DOMrenderingReact 브라우저 렌더링 DOM 및 CSSOM 트리 생성 바이트 → 문자 → 토큰 → 노드 → 객체 모델 HTML 마크업 👉 DOM(Document Object Model) CSS 마크업 👉 CSSOM(CSS Object Model) (추가) CSS가 트리 구조인 이유? CSS는 하향식으로 적용하므로! Render Tree 생성 DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 형성 렌더링 트리는 각 요소의 레... webrenderingrendering [React] 불필요한 렌더링 줄이기 component props에 고정 객체 넘겨줄 경우, 객체를 컴포넌트 밖으로 빼내 상수 변수로 관리하자 객체 자체를 넘겨주게 되면 객체이 내용이 변경되지 않아도 렌더링 될때마다 새로 객체를 생성하기 때문 component props에 연산에 따라 객체가 변할 수 있는 경우, useMemo를 감싸주자 (복잡한 연산이 필요할 경우에만 useMemo를 쓰자. 안그러면 메모리 낭비된다고 함)... renderingReactReact TIL // 2020.12.28-2 리액트에서 배열을 다룰 때, 자바스크립트처럼 this.state.array.push('some value')이런 식으로 하면 안된다. 왜냐? 불변성을 유지해야 하기 때문 state 내부의 값을 직접적으로 수정하지 않는 것을 불변성 유지라고 함. 불변성을 유지해야 데이터가 필요한 상황에 따라 리렌더링이 되도록 설계할 수 있고, 그래야 나중에 성능도 최적화할 수 있음. 그래서 push, spli... ReactrenderingdeleteeditCREATEarrayCREATE
React에서 Key가 필요한 이유 다음과 같이 map을 통해 리스트를 보여주면 문제가 발생한다. 여기서 고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하면 돼서 불필요한 렌더링을 없애준다. 그러기 위해서는 중복되지 않는 고유한 값을 key 값으로 부여해 주어야 한다. React에서는 key가 동일할 경우 동일한 Dom 요소를 보여주기 때문... ReactkeyDOMrenderingDOM ⛓️ 리액트 렌더링 과정 📍 index.js => App.js => 하위 route로 지정된 컴포넌트들 1. render index.js App.js 상태변화 === 렌더링 된 엘리먼트 업데이트 React의 element는 불변객체이므로 생성 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. - 때문에 컴포넌트에서 새로운 상태가 반환될 때 마다 변경된 부분을 계산하기 위한 과정을 밟는다. 결과적으로 Reac... ReactrenderingReact 어떻게 Virtual DOM은 브라우저 렌더링 횟수를 줄여주는가? virtual DOM의 행동방식을 유사하게 보여주는 사이트도 추천합니다 TLDR : virtual DOM은 replaceChild를 통해서 변경사항을 한 번에 바꿉니다. Virtual DOM은 DOM을 추상화해 어떤 태그, Attribute, Child를 가지는지를 나타낸 트리형태의 자료형이다. Virtual DOM이 DOM Tree의 여러가지 변경 사항이 있을경우 어떻게 렌더링 횟수를 줄여... renderingVirtualDOMReactReact react - start 프론트엔드 3대장이라 불리는 기술 중, 요즘 가장 핫한 react. 이러한 상황은 DOM을 조작하며 프로그래밍을 하게 되면, 소스 코드가 지저분해질 확률이 높고, 이에 따라 유지보수에도 어려움이 생긴다. 이런 문제를 해결하기 위해 많은 기술들이 나오게 되는데, 대표적인 것들이 위에 언급한 프론트엔드 3대장이다. 이 중 페이스북에서 만든 리액트는 가장 많이 사용되고 있으므로 프론트엔드를 지향하... Reactvirtual DOMrenderingReact 브라우저 렌더링 DOM 및 CSSOM 트리 생성 바이트 → 문자 → 토큰 → 노드 → 객체 모델 HTML 마크업 👉 DOM(Document Object Model) CSS 마크업 👉 CSSOM(CSS Object Model) (추가) CSS가 트리 구조인 이유? CSS는 하향식으로 적용하므로! Render Tree 생성 DOM 트리와 CSSOM 트리를 결합하여 렌더링 트리를 형성 렌더링 트리는 각 요소의 레... webrenderingrendering [React] 불필요한 렌더링 줄이기 component props에 고정 객체 넘겨줄 경우, 객체를 컴포넌트 밖으로 빼내 상수 변수로 관리하자 객체 자체를 넘겨주게 되면 객체이 내용이 변경되지 않아도 렌더링 될때마다 새로 객체를 생성하기 때문 component props에 연산에 따라 객체가 변할 수 있는 경우, useMemo를 감싸주자 (복잡한 연산이 필요할 경우에만 useMemo를 쓰자. 안그러면 메모리 낭비된다고 함)... renderingReactReact TIL // 2020.12.28-2 리액트에서 배열을 다룰 때, 자바스크립트처럼 this.state.array.push('some value')이런 식으로 하면 안된다. 왜냐? 불변성을 유지해야 하기 때문 state 내부의 값을 직접적으로 수정하지 않는 것을 불변성 유지라고 함. 불변성을 유지해야 데이터가 필요한 상황에 따라 리렌더링이 되도록 설계할 수 있고, 그래야 나중에 성능도 최적화할 수 있음. 그래서 push, spli... ReactrenderingdeleteeditCREATEarrayCREATE