2. 실행흐름 이해하기 + JSX 기본문법

npm start 명령어를 실행하면

프로젝트 내부에있는 index.js 가 실행된다. 그속에는

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)

라는 render 함수가 있고, 중간에있는 App 은 [컨트롤 + 클릭] 해보면 App.js를 가리키는 문법입니다.

 

  document.getElementById('root') 는 프로젝트 폴더가 만들어질때 같이 만들어진 public 이라는 폴더를 보시면

 

index.html 이라는 파일에서 root라는 id의 태그를 찾겠다는 뜻입니다.

index.html 생긴거보면 주석빼면 걍 아무것도없는 파일입니다

index.js의 최종 목적은 저 사이에 App.js 가 return 하고있는 코드를 집어넣겠다는 뜻입니다.

 

그렇기에 JS파일(App.js)에 HTML 문법을 써넣는 기술이 필요하고 그것을 JSX 문법이라고 합니다. 

 

 

옛날 리액트는 클래스 컴포넌트 방식을 사용했지만, 요즘은 함수형 컴포넌트 방식(Hooks)를 더 많이 사용합니다.

앞으로 사용하는 컴포넌트들은 모두 함수형 컴포넌트 방식을 사용할것입니다.

 

JSX 기본 문법

1. return은 하나의 태그만 가능하다.

2. 자바스크립트의 변수를 HTML 코드안에서 사용하려면 { } 중괄호 문법을 사용해야한다.

3. if문은 사용할 수 없고 삼항연산자를 사용해야한다. ( 조건 ?  참 실행문 : 거짓 실행문 )

4. 조건부 렌더링이 가능하다.(if문 처럼생김) ( 조건 && 참 실행문 )