React JS 코딩하는 방법

먼저 프로젝트 폴더에 public 폴더를 보게 되면 index.html을 볼 수 있는데 그 곳에 id="root" 인 div 태그를 볼 수 있다

html을 안다면 이해를 할것이다. 이 div안에 아무 태그가 없지 않은가? 하지만 브라우저에 검사를 들어가게 되면

 

이렇게 id가 root 인 태그 안에 class = "App"이 들어와있다. 어디에서 온걸까?

 

src폴더에 index.js를 눌러보자.

 

 

이런 코드로 되어있는데 여기서 주목 할 것은

  <React.StrictMode>

    <App /> //컴포넌트

  </React.StrictMode>,

 

위에 코드에 보이는 <App /> 인데 이것을 컴포넌트라 말할 수 있다.

아래에 document.getElementById로 root를 선택해 가져오게 되는데 이 아이디에 App /을 넣는다고 생각하면 된다.

 

컴포넌트란 사용자 지정 태그라 하는데

 

이 App이라는 컴포넌트가 지정 한것은 위에

 

import App(컴포넌트의 이름) from './App'(그 컴포넌트의 실체는 무엇인지);    (./App 은 실제로 App.js 이며 js가 생략되어있다)

 

그럼 App.js로 가보도록 하자

 

function 함수안에 익숙한 html 코드가 return되어 나오도록 되어있다. 이 코드를 불러오는 구조로 되어있다.

Class 상태로 보여질 수도 있다.

 

component를 상속한 App클래스의 render()라는 메소드가 리턴값으로 html 코드를 반환한다고 해석되는데

결국 메소드의 리턴값을 받아 사용한다..로 생각된다.

 

다만

import React, { Component } from 'react'; 

 

로 새로운 import 값이 추가되는데 아직은 모르겠으니 큰 그림부터 보고가자

class가 App인 태그 안에 내용을 변경하니 브라우저 화면에 원하는 결과값이 표시된다. 구조가 일단 어떻게 이어지는지 알게 되었으니 다음 장으로 넘어가도록 하자.