React 맛보기(1)

DOM 다루기 Element 생성하기

• DOM: 메모리에 웹 페이지 문서 구조를 표현함

CodeSandBox → 리액트 맛보기 동안 사용할 도구
Vanilla js Dom → W3Schools/ createElement
CDN → unpkg
React/ React-dom → element 생성/ appendChild

JSX과 Babel , JSX 다루기

• JSX: 문자도 HTML도 아닌 JavaScript의 확장 문법
• Babel: JavaScript Complier

JSX → React.creteElement 표현식
Babel → JavaScript Complier
JSX 다루기 → spread 연산자

멀티 Element 생성하기

Fragment → React.Fragment or <></>

Element 찍어내기

Function → 재사용 가능한 Element
Custom Element → Upper case
Children 제한 → 없음

JS와 JSX. 섞어쓰기

Interpolation → HTML에서 이미 사용중

리액트의 리랜더링 알아보기 1

바닐라 JS → 변경으로 인해 Element를 다시 그림
React → 변경된 부분만 다시 그림

리액트의 리랜더링 알아보기 2

• React 앨리먼트는 불변객체다.
• 앨리먼트 타입이 바뀌면 이전 앨리먼트는 버리고 새로 그린다.
• 타입이 같다면 key를 먼저 비교하고, props를 비교해서 변경사항을 반영한다.

리액트의 앨리먼트 → 불변 객체
변경 사항 반영 → 리액트에게 일임
리액트의 비교 → Reconciliation
Virtual Dom → 비교시 활용

이벤트 핸들러 써보기 1

바닐라 JS → on{event} /addEventListener
React → on{Event}

이벤트 핸들러 써보기 2

Object.assign → 객체 내용 복사
전역 변수 변경 → ReactDOM.render