React

• ReactDOM => Web App 개발에 사용한다.
• React Native => Mobile App 개발에 사용한다.

Component

• 하나의 매개변수 props만 받는다.
• 함수로 정의되었지만, 함수()처럼 실행하지 않고 <이름></이름> 또는 <이름 />으로 실행한다.

• createRoot로 Component를 담을 요소를 생성한다.
• createRoot.render()로 render한다.
• Component로 구성된 요소 안에 text를 넣으려면 props.children을 사용하여 rendering한다.

JSX 마크업

React API로 작성하면 코드가 복잡하기 때문에 JSX를 이용한다.

• Browser는 JSX는 읽을 수 없다.
  👉 Vite와 같은 도구를 이용하여 표준 JavaScript로 변환해야 Browser가 읽을 수 있다.
• 감싼 요소를 렌더링하지 않고자 할 때, <React.Fragment>를 사용한다.

• 속성의 이름은 Camel Case로 작성한다.
  👉 aria-, data-는 -를 사용한다.
• 변수에 할당된 것과 같이 동적으로 생성된 문자 값을 전달할 때에는 { } 안에 삽입한다.
  👉 JavaScipt의 객체는 { }로 표현되기 때문에, JavaScript의 객체를 삽입할 때에는 {{ }} 이중 중괄호가 된다.