1. 컴포넌트란 무엇인가?

리액트에서 웹, 앱을 이루는 최소한의 단위
1) 반복할 필요 없이 재사용이 가능
2) 코드의 관리 가능한 단위를 작게 유지가능

2. JSX 소개

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법
=> html 코드를 js로 형태로 변환하여 브라우저에서 작동하는 문법

3. 리액트 작동 방식

1) 기존 방식: 명령형(Imperative 접근 방식)

/* 기존 javascript에서 사용하던 방식 */
const para = document.createElement('p');
para.textContext = 'This is also visible';
document.getElementById('root').append(para);

2) React 방식

/* App.js */
function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      {/* 최종상태만 정의하면, 리액트에서 자동으로 지시사항(기존 자바스크립트 문법과 같은 형태)을 생성 후 작동 */}
      <p>This is also visible ~.~</p>
    </div>
  );
}

export default App;

4. 사용자 컴포넌트 만들기

한 컴포넌트 당 하나의 파일을 갖도록 연습
단, JSX 형태로 사용할 경우 무조건 대문자로 시작해야함

5. jSX에서 동적 데이터 출력 및 표현식 작업하기

동적요소 처리 시 중괄호 {} 내부에 사용

7. "props"를 통해 데이터 전달하기

컴포넌트 사이 데이터를 전달할 수 있는 방법이다.
props는 모든 속성(값)을 받는 객체가 된다.

8. JSX 소스를 개발자도구에서 볼 수 없는 이유

JSX 코드를 개발자 도구에서 볼 수 없는 이유는 브라우저는 JSX코드를 지원하지 않기 때문에며, 변환된 코드만을 볼 수 있다.