Babel

Babel은 자바스크립트 빌드를 가능하게 해준다.

ES5같은 하위버전에서도 동작하도록 바벨을 추가하였다.

• CDN 방식 : 로컬PC 캐쉬 사용함 - 시스템 사용 발생으로 속도가 느리다.
• unpkg방식 : 네트워크를 통해 객체 주입 - 속도가 빠르다.

JSX

React는 별도의 파일에 마크업(태그)과 로직(JS)를 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.

정리

JSX)

• 분명 자바스크립트 코드인데 HTML과 비슷하게 쓰고 있다.
• JSX도 JS이다.

Babel)

• 자바스크립트 컴파일러이다.
• 태그와 JS가 섞인 코드를 HTML과 JS로 분리해준다.
  -> JS 코드를 비즈니스 로직으로 작성할 수 있다.
• 낮은 버전의 브라우저가 지원하지 않는 ES6도 지원한다.
• 단, 비즈니스 로직을 쓰고 싶다면 괄호를 작성한다.
  괄호가 있으면 로직을 작성할 수 있다.

JSX와 html 차이점

• JSX는 Class가 아닌 className을 사용한다.
• html 태그 : onclick
  리액트 : onClick 낙타표기법 사용

주의사항

• 리액트에서는 render함수나 function함수에서 JSX를 리턴하게 되는데 형제노드는 쓸 수 없다.
  따라서 반드시 fragment 태그로 묶어줘야 한다. <></>
  div로 묶어도 문법적으로 가능하지만 불필요한 div태그가 많아지면 화면 분석에 불편해진다. 그러므로 반드시 fragment로 처리할 것!

useEffect

mount와 unmount를 지원하는 훅이 useEffect이다.

mount

컴포넌트가 나타나는 것

unmount

컴포넌트가 사라지는 것

ReactDOMClient

React 17ver.과 가장 달라진 점이다.

Props

element

React 엘리먼트는 불변객체이다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다. 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여준다.

text도 node이다 : TextNode
TextNode는 NodeName은 없지만 NodeValue는 있다.

엘리먼트는 React 앱의 가장 작은 단위이다.
엘리먼트는 화면에 표시할 내용을 기술한다.

Fragment

https://ko.reactjs.org/docs/fragments.html#gatsby-focus-wrapper

함수가 일급객체

일급객체이기 때문에 화면을 그려줄 수 있다.

render

부분 갱신 처리 가능

setInerval

이 메서드는 간격(interval)을 고유하게 식별할 수 있는 interval ID를 반환