(2) React Application 의 구조
React를 사용하려면, 그 구조를 먼저 알야아합니다.
이걸 모르면 사실 진짜 사용을 못합니다.
ex)
myapp
- node_modules : 프로젝트와 관련된 라이브러리 다 설치되는 폴더
- public : index.html이 존재하는 폴더 http://localhost:3000/ 로 어플리케이션이 작동되는 메인입니다.// index.html 내부에 이 div 로 작성한 컴포넌트들이 보여지게 됩니다. <body> <div id="root"><컴포넌트명 /></div> </body>-src - index.js : 작성된 컴포넌트들을 모두 불러와서 결합시켜서 화면에 출력 되도록 하는 코드가 작성됩니다.
- components > App.js :모든 컴포넌트들을 결합시키는 부분입니다. (import,export활용)
1) 리액트에서 반드시 설치해야할 모듈이 있습니다.
: react & react-dom 입니다.
react : 컴포넌트에 대한 정보들이 담겨있는 모듈입니다.
react-dom : 실시간으로 화면에 출력시켜 주기 위해 필요한 모듈입니다.
2) export 시킨 컴포넌트 가져오기 :typescript와 동일합니다.
형식)
import 불러올 클래스명 혹은 함수명 from '경로포함해서 불러올 파일명'
3) index.js에는 컴포넌트들을 실시간으로 동적으로 웹상에 출력시켜 주는 구문이 있습니다.
형식) (1. 부착시킬 컴포넌트명 ,2.부착위치)
ex)ReactDOM.render(<App />, document.getElementById('root'));
: App 이 컴포넌트, docu~ 가 부착위치입니다. id값을 가져왔습니다.
최근엔 Render 내부에 <React.StrictMode> 라는 컴포넌트로 감싸서 출력합니다.
이 컴포넌트는 문제가 발생하면, 발생된 에러메세지를 바로 출력하는 모드입니다.**
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);4) 위 3)번에서 컴포넌트들을 쓰게 되는데, 이 컴포넌트를 활용하기 위해서는 React 에 속한 Component 라는 클래스가 필요합니다.
import React from 'react';
:내부의 모든 클래스가 import 되기 때문에 Component를 쓸 수 있습니다.
import React,{Component} from 'react';
:같은 표현입니다.
5) 출력되는 부분은 render() 에 작성됩니다.
: 화면에 출력시켜주기위해서 필요로하는 Component함수입니다.
render(){ return(<h1>리액트 구조 및 환경설정파일확인</h1>) }
