[생활코딩-React] JS 코딩하는 법

[출처 : Youtube - 생활코딩]

https://youtu.be/LEPiRfPD9Uw?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

 

react-app 폴더는 이런 구조로 이루어짐.

 

 

 

public

index.html 파일이 있는 곳임.

index.html 안에 id가 root인 곳 태그 안쪽에 컴포넌트가 들어가도록 create-react-app은 약속했음.

 

 

 

src

컴포넌트는 src 안에 있는 파일들을 수정해서 만듬.

앞으로 개발작업을 하게되면 대부분의 파일을 src 안에 넣게 될 것임.

그중에서 entry파일, 즉 진입파일은 index.js 파일임.

 

위에 밑줄 친 부분을 기반으로 해서 public의 index.html 파일을 수정한다.

 

위에 밑줄 친 <App />은 react를 통해 만든 사용자 정의 컴포넌트이다.

저 컴포넌트의 실제 구현은 App.js에서 이루어진다.

 

 

App.js

App.js (function type)

 

 

우리 수업에서는 class type으로 배울거기 때문에 아래처럼 변경해준다.

 

 

 

그리고 우리가 App.js 안의 내용을 바꾸면 바로 reload되면서 적용이 된다.

 

ex)

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

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello, React!!
      </div>
    );
  }
}

export default App;