JSX와 컴포넌트
JSX
JSX란
JSX는 Babel에 의해서 Transcompile 된다
- create-react-app을 이용하면 babel이 자동으로 포함
- babel로 transcompile을 하면 js코드로 변환이됨
JSX의 특징/ HTML과의 차이점
HTML 태그 내에 JavaScript 연산
class -> className
스타일은 object로
닫는 태그는 필수
최상단 element는 반드시 하나
컴포넌트
Component란
Class Component와 Function Component
Component의 특징
Props와 State
Props
Props란?
Props는 읽기 전용
DOM Element의 Attributes
HTML과 다른 방식의 React Attribute(checked, value)
React에서만 쓰이는 새로운 Attribute(key)
State
State란
State의 값은 직접 변경하지 마라
State를 변경하는 두 가지 방법
Object를 갖는 State를 만들 때 주의사항
- 박스 안에 있는 grade는 변경되었지만 박스 자체는 변경된 것이 아니기에 재렌더링이 일어나지 않는다.
이미지 출처 - Elice
