public
- 정적인 데이터가 있는 폴더 (static)
- 데이터가 변하지 않는 것들이 위치 (이미지 등)
- 리액트는 VDOM을 사용하는데 VDOM이 들어갈 빈 HTML이 존재 (index.html)
src
- 동적인 데이터가 있는 폴더 (dynamic)
- 실질적인 React 개발이 이루어지는 메인 폴더
😄 index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body><div id="root"></div>: app.jsx에서 작성한 코드가 return되어 index.js를 거친 후 만들어진 DOM이 그려진다즉 index.html은 직접적으로 요소를 추가하는게 아닌 index.js에 의해 렌더링 된 결과가 표시되는 것
주의사항
- index.html 이름 변경시 오류 발생
😄 app.jsx
-
실질적인 React 코드를 작성하는 곳
-
실제로 화면에 표시되는 내용 등은 여기에서 정의된다
😄 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);-
import React from 'react'; : React 본체
-
import ReactDOM from 'react-dom'; : React 본체
-
import App from './app'; :
app.jsx에서 생성된 React 코드를 호출 (확장자가 js, jsx면 생략 가능) -
ReactDOM.render(첫번째 인수, 두번째 인수)
- 첫번째 인수 : app.jsx에서 정의하고 있는 App Component 지정 (
<App />) - 두번째 인수 : 'root'라는 ID를 가지고 있는 요소 지정
- 첫번째 인수 : app.jsx에서 정의하고 있는 App Component 지정 (
-
<React.StrictMode> ~ </React.StrictMode>
- React 개발중 오류 발견하면 알려준다 (JavaScript의 stric모드와 비슷)
- 생략해도 문제는 없다
-
document.getElementById('root') : 호출한 app.jsx를 index.html에서 'root'라는 id를 가진 곳에 그려준다
결론
지금까지 HTML, CSS, JavaScript는 작성한 것이 그대로 브라우저에 업데이트되어 동작했지만 React는개발시 작성하는 코드와실제로 배포되는 코드는 전혀 다르다.
실질적으로 개발시 사용하는건 index.js와 app.jsx이고 수정 역시 여기서 한다. 하지만 배포하기 위해 빌드 작업을 거치면 스크립트는 새로 생성되고 코드 자체가 전혀 다르게 변한다 (즉 빌드 이후 생성된 것은 가독성도 떨어지고 더 이상 편집하기 힘들다)
😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍
지적은 제 발전의 원동력입니다. 사소한 것이라도 지적해주세요 :)