🐾   [자바스크립트] index.html, App.js, index.js 이해하기

image 다 만들어져 있어서 처음을 어떻게 만들어야하는지 몰라도 업무하는데 문제가 없었다.
하지만 공부를 하면서 느껴졌다. 내가 처음을 모르는구나... 기초 지식이 없는 느낌이었다.
create-react-app를 설치하면 자동으로 파일 생성 된다.
public 폴더안에 index.html 파일이 있다.
src 폴더안에 App.js와 index.js 파일이 있다.

index.js 코드

import App from './App';

ReactDOM.render(
  <App />,  //App.js 파일로 이동하고
  document.getElementById('root')
  //id가 root인 곳으로 이동한다 =>index.html 파일안에 id가 root가 있어서 찾아간다.
);

document.getElementById() : 해당하는 id의 요소에 접근하는 함수

index.html

<div id="root"></div>

id가 root가 있어서 찾아간다. 그럼 화면을 로딩된다. index.html 파일은 화면을 보이게 하는 파일이다.

App.js

class App extends Component {
    render() {
        return (
            <HashRouter>
                <Switch>
                    <Route path={''} component={Main}/>
                </Switch>
                <Switch>
                    <Route path={'/menu'} component={Menu}/>
                </Switch>
                <Switch>
                    <Route path={'/study'} component={Study}/>
                </Switch>
            </HashRouter>
        );
    }
}

서버 설정 / 미들웨어 정의 / 라우트 정의/인증 등 여러가지를 설정한다. 화면을 정의하는 한다.

실행하는 방법 예시

App.js

function App() {
  return (
    <div className="App">
        <button>나는버튼</button>
    </div>
  );
}

index.js가 상위자이다.

리액트 돔을 랜더하면 document.getElementById(‘root’) 태그 아이디를 찾는다.

root 가 있는 index.html안에 있는 <div id="root"></div> 이 코드 안에 <App /> 이 실행된다. <App /> 이 코드는 App.js 파일안에 있는 코드이다

결론

 <div id="root">
   <div className="App">
        <button>나는버튼</button>
    </div>
 </div>

이렇게 실행되서 화면에 “나는버튼"이라는 버튼이 보인다.

​ ​ ​