React/Learn

리액트를 처음 접했을때 다루는 방법

3.dev 2023. 1. 23. 14:28
반응형

CRA로 React App폴더를 만들었다면 진짜 React 코딩을 시작해야 한다.
처음 React App폴더를 만났을때 어떤파일을 건드려야 하는지, 내가 어떤 파일에 코딩을 해야하는지 몰라서 당황했다.


아무것도 안했는데 이렇게 복잡한 파일구조를 만나면 당황했던게 당연하다.

우선 가장 기본적인 ‘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" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

HTML과 Javascript를 배웠다면 이해할 수 있을 내용들이다.
'root'라는 ID를 가진 div가 하나 생성되어 있고 React App이라는 이름의 웹이 만들어져 있는 것을 말이다.

우선 React App을 실행해보자.

User@DESKTOP-GGSDAF7 MINGW64 ~/Documents/Velog/CRA/my-app (main)
$ npm start

터미널에 위와 같이 입력해보자.

_혹시 에러가 발생한다면 접속중인 경로가 작업중인 폴더에 있는지 확인해보자.
(다시 접속하거나 재부팅을 한다면 최종경로에서 그 전폴더에 설정되어 있는경우가 간혹 있다.)
최종경로로 설정되어 있지 않다면,

User@DESKTOP-GGSDAF7 MINGW64 ~/Documents/Velog/CRA
$ cd '최종경로폴더이름'

이렇게 입력하면 정상동작 할것이다._


명령어를 잘 입력했다면 이런 웹사이트가 실행될 것이다.
그런데 조금 이상하다.


분명 index.html에서는 이런 코드가 작성되어 있지 않았다.

그 비밀은 바로 Src/App.js에 있다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.js에 이런 코드가 작성이 되어있는데,
App이라는 함수(function)은 아까 웹에서 본 코드를 return하고 있다.

그렇다면 App.js에서 내용을 수정하면 내용이 바뀔것이라는 생각이 든다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <p>Hello, World</p>
  );
}

export default App;

간단하게 테스트 해봤다.


역시 잘 동작한다.

또, improt './App.css'; 가 적혀있는 것 보니 src/App.css가 Style을 담당하는 것이다.
사실 App.js로 오기전에 거치는 곳이 한곳 더 있는데 바로 src/index.js와 src/index.css다.

CRA로 React-App을 만들었을때 기본적으로 코드가 입력되어있기 때문에 삭제가 필요한 경우 해당 폴더를 확인할 필요가 있다.
자 이제 App.js에 코딩을 하면 된다는 것을 알았으니 준비는 끝났다.

반응형