[React] 프로젝트 구조에 대해 알아보자!

...?

그만 알아보자 ^^

 

 

는 뻥이고 앱을 구동시키는데 저 파일들이 다 필요한 것은 아니다!

중요한것만 알아보자.

 

 

암튼 그렇다고 함

그럼 프로젝트에서 필요없는 녀석들을 제거-해보겠다.

 

왼쪽 : 프로젝트 생성 직후, 오른쪽 : 불필요한 파일 삭제 후

 

 

public에서는 index.html만 남기고 삭제했고 

src폴더 안은 모두 삭제 후 index.js를 새로 생성햇다.

index.js파일은내 프로젝트가 브라우저 안에서 실행될 때 가장 먼저 수행되는 파일이다.

 

 

그럼 텅 빈 index.js파일을 아래와 같이 채워넣자!

    // 1) Import the React and ReactDOM libraries
    import React from 'react';
    import ReactDOM from 'react-dom/client'; 

    // 2) Get a reference to the div with ID root
    const el = document.getElementById('root');

    // 3) Tell React to take control of that element
    const root = ReactDOM.createRoot(el);

    // 4) Create a component
    function App(){
        return <h1>Hi there!</h1>;
    }

    // 5) Show the component on the screen
    root.render(<App />);

그럼 http://localhost:3000/은 h1태그 하나만 있는 페이지로 바뀐다.

App함수에서 <h1> 태그를 리턴하는 것을 jsx라고 하는데 다음에 이 jsx라는 녀석에 대해서 더 자세히 알아보겠다.

(라고 강사가 말했습니다)

 

이것이 저의 메인페이지입니다만

끝.