인문학적 공학도

virtual DOM React.js는 DOM 객체 기반의 브라우저가 유저와의 잦은 인터랙션을 최적화하기 위한 라이브러리입니다. 유저의 인터랙션에 따라 상태가 변화할 경우, DOM 요소들이 업데이트 되는데, 일부분이 바뀜에도 전체 DOM을 업데이트 하는 것은 브라우저의 연산에 많은 부담을 줍니다. 리액트의 virtual DOM은 상태 변화로 뷰 포트를 업데이트 하기 전에 virtual DOM에 먼저 적용하고 이후에 최종 변화결과를 DOM에 전달하여 한 번의 렌더링으로 마무리할 수 있습니다. Virtual DOM이 메모리에 저장된 상태에서 변경 사항들을 먼저 반영한 뒤 기존 DOM과 비교 후 변경된 사항만을 DOM에 전달해 줍니다. 즉 실제 DOM의 렌더링 횟수를 줄여주므로 성능에 적은 영향을 주게 되는 ..

네이버 DEVIEW 2021 심흥운님의 Inside React(동시성을 구현하는 기술)의 요약 및 소감이다. React18 버전에서 가장 크게 강조된 키워드는 "동시성"이다. 동시성에 대해 알아보기 위해서는 병렬성과 비교하며 알아보는 것이 좋겠다. 동시성 싱글코어에서도 작동 동시에 실행되는것처럼 보임 컨텍스트 스위칭 필요 최소 두 개의 논리적 통제 흐름 예) 동영상 재생하면서 메모장 쓰기 병렬성 멀티코어 필요 실제로 동시에 실행됨 최소 한 개의 논리적 통제 흐름 예) GPU를 이용해 이미지 출력 동시성이란 2개 이상의 독립적인 작업을 잘게 나누어 동시에 실행되는 것처럼 보이도록 프로그램을 구조화하는 방법이다. 중요한 부분은 "것처럼 보이도록" 한다는 것이다. 자바스크립트는 싱글스레드 언어이기 때문에 한 ..

1. key에 index를 사용하지 않는 이유 Key란? React에서 여러 컴포넌트를 동적으로 생성하여 표시할 때 반드시 고유의 key를 주도록 하고 있습니다. Key 속성은 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. // key를 사용한 배열 렌더링 예시 const todoItems = todos.map((todo) => {todo.text} ); Key를 사용하는 이유는? 요소의 변화를 탐지하기 위해 필요합니다. React는 기본적으로 state 중 변화가 발생할 때만 캐치해서 DOM을 업데이트 합니다. state의 배열에 어떤 요소가 추가되었을 경우, 배열 전체를 리렌더링하기보다는 추가된 요소만을 리렌더링하는 것이 더 효율적입니다. arr = [ {id: 0, t..