Element
Element는 React 앱의 가장 작은 단위이다. 엘리먼트는 화면에 표시할 내용을 기술한다.
<div id="root"></div>이런 div가 html에 있다고 할때, 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부른다.
*React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드를 사용한다.
React 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달한다.
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));엘리먼트는 불변 객체로 생성 후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
대부분의 React 앱은 ReactDOM.render()를 한 번만 호출하지만 React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에는 DOM 업데이트 (리콜) 한다.
React.creareElement(
type,// 태그 이름 문자열 or 컴포넌트 or React.Fragment
[props],//컴포넌트에 넣어줄 데이터 객체
[...children]//자식으로 넣어주는 요소들
);babel이라는것을 쓰면 중첩된 html 요소들을 사용할때 html요소들 마다 creareElement을 하지 않고 html 문법 그대로 써도 인식하게 할 수 있다.
JSX 문법
- 최상위 요소가 하나여야 합니다.
- 최상위 요소 리턴하는 경우, ( ) 로 감싸야 합니다.
- 자식들을 바로 랜더링하고 싶으면, <>자식들</> 를 사용합니다. => Fragment
- 자바스크립트 표현식을 사용하려면, {표현식} 를 이용합니다.
- if 문은 사용할 수 없습니다.
- 삼항 연산자 혹은 && 를 사용합니다.
- style 을 이용해 인라인 스타일링이 가능합니다.
- class 대신 className 을 사용해 class 를 적용할 수 있습니다.
- 자식요소가 있으면, 꼭 닫아야 하고, 자식요소가 없으면 열면서 닫아야 합니다.
- < p>어쩌구< /p>
- < br/>
