관심있는 라이브러리/React.js

React의 구조와 JSX

건브로 2020. 12. 20. 23:43

안녕하세요! 건브로입니다!

종강해서 그런지 오늘도 글도 올리고 공부했어요.

아직까지는 많이 어려운 건 없으나 나중에는 많은 어려움이 있겠죠?

(Vue를 공부를 한 적이 있어서 그런 것 같아요😁)

확실히 코딩은 한 번 배워두면 비슷한 언어나 프레임 워크를 공부할 때

편한 것 같아요! 여러분들도 파이팅하시고, 공부했던 것은 배신 안 합니다!

그리고 코로나 조심하시고, 제 글을 봐주셔서 감사합니다!!

1. React의 폴더 구조

react는 npx create-react-app을 하고 나면 node_modules와 public, src폴더가 새로 생겨요.

그리고 폴더에 안 들어가 있는 파일로 README.md와 package.json,

package-lock.json, .gitignore, .eslintcache등이 있습니다.

이 파일들이 무슨 역할을 하는 것은 잘 모릅니다.

package.json에는 저희가 이용하는 dependencies들이 있고, 프로젝트 이름이
있다는 것을 명심하셔야 합니다! 그리고 package-lock.json 파일은 package.json과 같이
깃허브 올 릴 때 같이 올려야 합니다. 왜일까요?
package-lock.json 파일은 의존성 트리에 대한 정보를 가지고 있어요.
이 파일은 파일이 생기고 나서부터 의존성 트리가 다시 생성될 수 있도록 합니다.
package.json 파일을 수정하거나 node_modules 트리를 수정하게 되면, package-lock.json이 생성됩니다.
그리고 패키지를 다운로드하면 package.json에는 dependencies를 선언하게 됩니다.
dependencies는 version range를 사용해요. version range의 기호는 ^(Caret Ranges)입니다.


결국, package.json 와 package-lock.json를 같이 깃허브에 올리지 않으면, 다른 사람이 그 소스코드를 사용할 때
의존성 트리가 다르게 설치될 수 있어요. 그럼 오류가 발생하겠죠?

하지만, 여기서는 알 필요가 없어요. 

폴더의 구조가 더 중요합니다.

 

src에는 index.js, App.js가 있어요. 그리고 public에는 index.html가 있어요.

먼저 index.js, App.js, index.html 코드를 살펴보겠습니다.

//index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

 

//App.js

import React from 'react';

function App() {
  return(
    <div>
      <h1>Hello</h1>
    </div>
  );
}

export default 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" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <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>

 

index.html에 직접적으로 요소를 추가하지 않아요.

대신 index.js를 통하여 App.js를 컴포넌트로 만들어서 사용합니다.

컨포넌트란 HTML로 반환하는 함수라고 생각하시면 됩니다!

index.js에서 보면

import App from "./App.js";

이 부분은 App.js를 불러오는 코드예요. 

또 다른 컴포넌트를 만들 때는 src폴더 안에 '새로운 컴포넌트.js'로 만들어서 사용해요.

  그리고 아래의 코드는 index.html에 id가 root인 자리에 컴포넌트를 추가하고, 렌더링 해주는 코드입니다.

ReactDOM.render(<App />, document.getElementById('root'));

그래서 컴포넌트로 만들어 주고자 할 때는 <App/>처럼 첫글자는 대문자로하고 만들어 주셔야 합니다. 

단, App컴포넌트 하나밖에 렌더링 못해서 여러 개의 컴포넌트를 index.js에 추가를 할 수가 없어요.

대신, App컴포넌트 하위로 여러 컴포넌트를 생성할 수 있습니다. 

 

이제 App.js를 살펴보겠습니다.

function App() {
  return(
    <div>
      <h1>Hello</h1>
    </div>
  );
}

export default App;

App.js에서는 App함수가 있고, 반환 값으로는 html 태그들이 있어요.

이렇게 하는 이유는 App을 컴포넌트로써 사용하기 때문에 그래요. 그래서 id가 root인 곳에 요소를 추가하려면,

반환 값으로 html 태그로 해야 해요. 

 

그리고 export default App이 있습니다. 이 부분은 App을 보낼 수 있게 끔 만드는 코드예요.

그래서 export로 보내고, 컴포넌트를 쓰려고 하는 곳에서는 import를 사용합니다.

 

2. JSX

 

JSX는 위에서 봤던 코드 중에 하나예요.

바로!!!! App.js에 자바스크립트와 html을 같이 썼던 부분이 JSX입니다.

JSX는 리액트에서 사용하는 특별한 문법이에요.

더보기

※중요

컴포넌트를 작성할 때마다 import React from "react";를 써줘야 합니다.

 

=>안쓰면 JSX가 있는 컴포넌트를 사용하지 못해요.

 

 

여기서 끝입니다! 아직 리액트를 공부하고 있는 단계라 부족하지만 계속 성장해 나갈게요!

다들 코로나 조심~~

 

 

 

'관심있는 라이브러리 > React.js' 카테고리의 다른 글

[React.js]라우터  (0) 2021.01.13
component 생명주기  (0) 2020.12.25
state란 무엇일까?  (0) 2020.12.24
props와 map 그리고 propTypes  (0) 2020.12.22
React setting  (0) 2020.12.19

'관심있는 라이브러리/React.js'의 다른글

  • 현재글React의 구조와 JSX

관련글

티스토리툴바