리액트에서는 자바스크립트 코드 안에 태그를 섞어 쓴다.
그래서 App.js 파일을 열어보면 자바스크립트 파일인데도 html 태그가 섞여쓰이는걸 볼 수 있다.
이러한 문법을 JSX라고 한다.
create-react-app으로 리액트 프로젝트 생성
터미널에서
npm init react-app <폴더이름>혹은 폴더를 VS Code로 열고 터미널에서
npm init react-app .개발 모드 실행
npm run start개발 모드 종료
Ctrl + C2022년 3월 8일 이후로 리액트의 18 버전이 나왔다. 그래서 index.js 파일에서 코드를 쓰는 방식이 조금 바뀌었다. index.js 파일을 보면 ReactDOM.render 가 아니라 ReactDOM.createRoot라는 함수를 사용하는 코드가 만들어지는데 이전 버전에서 나오는 코드를 그대로 쓰게 되면 아래와 같은 경고 메시지가 개발자 도구 콘솔창에 나올 수 있다.
이런 경우 index.js 파일의 코드를 아래처럼 수정하면 된다.
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>안녕 리액트!</h1>);이전 버전에서는 ReactDom.render() 함수 안에서 코드를 작성하는데, 최신 버전에서는 root.render() 함수 안에서 작성하면 된다.
리액트의 index.html
웹 브라우저에서 가장 먼저 실행되는 파일.
최소한으로 웹페이지가 동작하게끔 필요한 코드는 생각보다 많이 없음.
리액트의 index.html
index.html 파일이 열리고 나서 실행되는 파일
리액트 코드들 중에서 가장 먼저 실행되는 파일
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>안녕 리액트!</h1>);React-Dom 이라는 패키지에서 default로 export하는 객체를 ReactDOM이라는 이름으로 임포트해서 이 객체의 render라는 메소드를 실행하고 있음. 여기서 render란 화면을 그린다라는 뜻으로 리액트에서는 render 메소드로 HTML 태그를 만들어주는 것.
이때 render 메소드의 argument로 html 태그가 그대로 온 것을 볼 수 있는데 이것은 순수 자바스크립트 코드가 아닌 리액트에서 지원하는 JSX 문법이다.
const에서는 DOM요소들중에서 root라는 id속성을 가진 요소를 가지고 온다는 것을 알 수 있음. 결과적으로 root라는 id를 가진 HTML요소가 createRoot의 argument 값으로 사용되고 있음. 실제로 render 메소드가 실행되면 리액트는 render html태그 argument 값을 바탕으로 새로운 HTML요소를 만들고 그 요소를 creatRoot의 argument 값에다가 집어넣는 방식으로 동작함.
여기서 id가 root인 HTML 요소는 index.html 파일에 작성된 id="root"인 div태그이다. 바로 이곳에 우리가 작성한 h1태그를 넣어 준 것임.
=> 리액트의 동작 원리
1.리액트 프로젝트가 실행되면 브라우저는 index.html 파일을 연다.
2. index.js 파일의 코드도 실행한다.
3. ReactDOM.render 메소드는 argument 값을 활용해서 HTML 요소를 만든다.
4. createRoot가 id가 root인 argument index.html div값에 그 요소를 넣어준다.
ReactDOM의 render메소드는 보통 index.js파일에서 한번만 실행된다.