[ React ] 리액트 화면 띄워보기

이번 게시글에선 리액트를 사용해 화면을 띄워보는 내용을 다룰 것이다.

저번 게시글에서 만든 hello-react 프로젝트를 코드에디터 프로그램으로 열어보자.

필자는 VisualCode 사용.

다음과 같은 프로젝트가 구성이 되어있는데 눈여겨 볼 곳은 index.html, index.js, App.js 파일이다

App.js 는 사용자가 만든 컴포넌트다.

이 컴포넌트를 호출하면 호출한 곳으로 화면을 그려주던, 그 외의 기능을 수행하던 할 내용이 담겨있다.

index.html 은 우리가 흔히 알고있는 브라우저에 보여주고자 할 화면이다.

index.js 는 App.js ( 컴포넌트 ) 와 index.html ( 화면 )을 연결해주는 다리 기능? 을 해주는 파일이다.

소스를 참고하면서 이해해보자.

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

//Class 형태로 만들어진 컴포넌트는 꼭 render 함수 있어야하며 render 함수 내부에서 JSX 코드를 return 해주어야함.
class App extends Component {

  //render 함수
  render() {
  
    return (
    
      //JSX
      <div>리액트는 처음이지?</div>
    );
  }
}
export default App; //현 컴포넌트를 다른 곳에서 불러와 사용할 수 있도록 내보내기를 해줌.

필자는 App.js 를 호출하는 화면에 '<div>리액트는 처음이지?</div>' 를 그려지게 해주고 싶다.

뭔 말인가 하니, 현재 App.js 는 "리액트는 처음이지?"를 담고있는 div를 가지고 있는 컴포넌트이다.

이러한 App.js 를 어딘가에서 호출할테고, "리액트는 처음이지?"를 자신을 호출한 곳에 리턴한다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

//브라우저에 컴포넌트를 보여줌
ReactDOM.render(

  //param1 - 화면에 보여줘야되는 렌더링할 컴포넌트
  <React.StrictMode><App /></React.StrictMode>,
  
  //param2 - 컴포넌트를 어디다 그려줄건지. index.html 파일에서 ID가 root인 엘리먼트를 찾아 뿌려줌
  document.getElementById('root')
);

serviceWorker.unregister();

ReactDOM.render(param1, param2) 의 형태를 가지고 있으며 이는 param2 에 param1 을 그려준다는 뜻이다.

앞서 App.js 를 어딘가에서 호출했다고 했는데 바로 여기 index.js 의 <App/> 가 호출하는 부분이다.

이렇게 호출한 App.js 를 어디다 그려줄 것이냐? 'root' 라는 아이디를 가진곳에 그려줄 것이다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

    <div id="root">
       //App.js의 render() 안의 내용이 이곳에 return 된다.
    </div>

  </body>
</html>

방금 말한 'root' 라는 아이디를 가진 div 를 index.html 이 가지고 있다.

즉, App.js 의 내용이 index.js 를 거쳐 index.html 의 'root' div 에 그려지게 되는 것이다.

실행화면

저작자표시

'Coding Story > REACT' 카테고리의 다른 글

[ React ] 리액트 Input Form 상태 관리, 배열 관리 (0)	2020.10.21
[ React ] 리액트 동적 데이터 state (0)	2020.10.21
[ React ] 리액트 정적 데이터 pops (0)	2020.10.21
[ React ] 리액트 JSX 문법 규칙 및 유용한 플러그인 (0)	2020.10.21
[ React ] 리액트 Window 환경 설치 (4)	2020.10.21

App.js

index.js

index.html

'Coding Story > REACT' 카테고리의 다른 글

티스토리툴바