리액트 개인과제를 하느라 정신이 없었던 주차였다
아직 자바스크립트에 대해서도 다 알지 못해서 더 어려운거 같다
하루아침에 되지 않는다는걸 또 느꼈고 공부 방식이라던지 어떤한걸 먼저 공부를 해야하는지 최대한
가져가고 이노베이션 캠프중에도 물론이지만 캠프가 끝나고 공부해야겠다
가상DOM이란?
작업을 하다가 어떠한 부분을 수정해야 할떄
document.getElementById()라는 DOM 접근 메서드를 이용할 텐데 이 방식의 아쉬운점은 메모리 누수와 속도 그리고 코드량이 있다 만일 태그를 찾는 코드를 변수에 저장하지 않고 매번 메서드를 사용한다면 매 단계마다 수많은 DOCUMENT객체들을 전부 흝으며 찾는 현상이 발생되고 이것은 곧 메모리 누수로 이어진다 그리고 수정후 변화가 일어난다면 다시 연산하고 레이아웃을 구성하고 웹페이지를 다시 그려주는 과정에서도 시간이 든다
다른하나의 객체를 찾기 위해 작성하는 코드가 복잡할수있다 ID라는 고유성을 침해하당하지 않게 태그의 네이밍을 심사숙고해야할것이고 태그를 접근하기 위해 작성해야 하는 메서드가 짧지않다(document.getElementById())
html 마크업을 시각적이 형태로 변환하는 시간(css가 적용되고 수정되어 반영되는 시간)이 드는 것은 어쩔 수 없지만, 최소한의 DOM 조작을 통해 개선하고자하여 가상돔이라는 개념을 도입되었다
가상돔이란? 실제 돔에 접근하여 조작하지 않고 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다 (무거운 실제 돔의 가벼운 사본느낌)
작은 규모의 레이아웃(리플로우)이 여러번 발생하는 것보다 큰 규모의 레이아웃이 한 번 발생하는 것은 성능상의 큰 차이를 나타낸다
- 변화가 일어났을때 변화된 버전을 가상돔으로 바꿈(데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링)
- 가상돔끼리 비교(변화 전의 가사돔과 변화된 가상돔 비교)
- 바뀐부분만 적용(바뀐부분만 실제 돔에 적용 함으로써 에이아웃 계산은 한번만 이행된다)
jsx문법의 특징
반드시 부모 요소 하나가 감싸는 형태여야 한다
- virtyal dom에서 컴포넌트 변화를 감지할때 효율적으로 비교할수 있도록 컴포넌트 내부는 하나의 dom트리 구조로 이루어져야 한다는 규칙이 있기 때문
- 자바스크립트 표현식
- jsx안에서도 자바스크립트 표현식을 사용할수있다 자바스크립트 표현식을 작성하려면 jsx 내부에 코드를 중괄호로 {} 감싸준다
- if문(for문) 대신 삼항 연산자(조건부 연산자) 사용
- 자바스크립트의 if문과 for 루프는 jsx에는 쓸수가 없다 그렇기 때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자)를 사용 한다.
- React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용 한다
- JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다. 카멜 표기법으로 작성해야 한다. (font-size => fontSize)
- JSX 내에서 주석 사용 방법
- JSX 내에서 {/…/} 와 같은 형식을 사용 한다