Don’t worry about failures

Issue Infinity scroll을 구현하면서, 해당 row에 체크하는 기능을 추가. 리스트의 양이 적을 때는 문제 없이 빠르게 체크 영역이 표시가 되었다. But, 리스트의 양이 많아지면서 문제가 생겼다. 2000줄 정도 스크롤을 내리고 선택을 했을 떄 선택 영역의 반응이 매우 느린 이슈가 생겨버렸다. 원인 파악. 1. 클릭한 리스트에 대해 push, slice 같은 함수에서의 시간 복잡도 문제? 2. 렌더링 문제? 원인 1. console.time을 찍어 보았을 때 현 문제되는 이슈의 원인이 되지 않음. ( 물론 slice 부분에서 O(n)에 따라 선택한 리스트가 많아졌을 때 이슈가 존재할 수 있음. 이 부분은 별도록 처리 ) 원인 2. console.log를 찍어 보았을 때, 클릭한 row에 ..

Element Rendering react 앱의 가장 작은 단위 브라우저 DOM 엘리먼트와 달리 react 엘리먼트는 일반 객체. 루트 DOM 노드를 기준으로 react dom이 모든 엘리먼트를 관리. react DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다. Components and Props 리액트에서 컴포넌트는 UI를 기반으로해서 하나 하나의 조각과 같다. 이러한 조각의 형태로써 관리를 하기 때문에 재사용, 확장성과 특정 UI 조각을 집중에서 살펴볼 수 있습니다. angular를 사용하다보니 angular와 비교하여 생각해보자. angular는 component의 개념이 하나의 UI 조각이라는 개념보다는..

About JSX 개념 HTML, 문자열이 아닌, JavaScript Extention 자바스크립트의 확장 문법이다. 즉, 리액트에서는 Javascript를 통해 HTML을 표현하며 view를 구성할 수 있게 도와주는 자바스크립트의 문법 채택하여 리액트의 개발에 큰 도움을 주고 있다. JSX의 표현 JSX는 자바스크립트로 읽어드리지만, 코드상 보이는 형태는 HTML 더 가깝다. 이 때문에 view를 표현하는 데에 있어 더 자유롭다. HTML과 같은 형태의 코드를 변수에 담고 함수에 return값으로 반환하며, view의 렌더링을 구성한다. 이러한 구성과 virtual DOM 때문에 리액트는 더 view를 위한 javascript 라이브러리, 사용자 인터페이스를 만들기 위한 javascript 라이브러리라..