React 2강 - 실행흐름 이해하기
실행과정
React는 데이터변경감지를 해서 UI를 그려주는 엔진이다.- package.json : React를 실행하는 config 파일
- npm start를 하면 index.html 파일이 실행된다.
- render();라는 함수를 실행시키도록 한다. 함수 안에 들어있는 요소가 그림을 그리게 되는 요소이다.
- App.js의 function 매개변수는
<App />과 document.getElementById('root');**이다.
문법
- JSX문법을 사용한다.
<App />이라는 문법을 통해 App()함수를 실행시킨다.- document.getElementById('root');는 index.html에서 root가 있는 id를 찾게 된다.
- 이렇게 찾게 된 곳에서 App()의 return값을 집어넣게 되는 것이다.
- 결국 열리는 파일은 index.html이 되는 것이다.
JSX 문법
- 보통 자바스크립트에서는 html 태그 등을 사용할 수 없지만, function에 들어가는 return값은 html 태그가 들어갈 수 있다.
- 말 그대로 html 코드를 자바스크립트에서 사용할 수 있는 것이 JSX라고 할 수 있다.
- 따라서 모든 것을 관리할 때 자바스크립트 파일만 관리하면 된다.
- 결국 열리는 파일은 index.html이고 App.js에서 무언가가 변경되면 페이지가 변경되는 것이 아닌
<body>가 바뀌는 것이다. - 따라서 이를 SPA(Single Page Application)이라고 한다.
- 페이지를 새로 불러오는 것이 아니라 re-render가 된다.
- 따라서
<a>태그를 사용하지는 못한다. 이는 페이지를 가져오는 것이니까. - 따라서 이를 대체하는 태그들이 있다.
출처
React 오프라인 2강 - 실행 흐름 이해하기 메타코딩
혼자 공부하는 공간