App.js 살펴보기


App.js

yarn craete react-app 프로젝트 명을 이용해 react 프로젝트를 생성했다면 App.js 파일을 확인할 수 있습니다.

import React from 'react';
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;

위 코드는 처음 프로젝트를 생성했을 때, 나타나는 기본 코드입니다.

모든 코드를 지우고, 아래와 같이 코드를 작성해 보겠습니다.

import React from 'react';

function App() { // 함수형 컴포넌트
  return (
    <h1>Hello! React!</h1>
  );
}

export default App;

위와 같이 코드를 작성하고 http://localhost:3000에 접속해보면 아래와 같이 Hello! React!라는 문자가 나타나는 것을 확인할 수 있습니다.

hello_react

import React, { Fragment } from 'react';

function App() { // 함수형 컴포넌트
  return (
    <h2>test1</h2>
    <h2>test2</h2>
  );
}

export default App;

위 코드를 살펴보면, <h2> 태그를 2개 사용하고 싶어서, 작성한 코드입니다. 하지만 웹 브라우저를 통해 살펴보면 아래와 같은 에러가 나타나게 됩니다.

Failed to compile
./src/App.js
  Line 6:5:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

  4 |   return (
  5 |     <h2>test1</h2>
> 6 |     <h2>test2</h2>
    |     ^
  7 |   );
  8 | }
  9 | 
This error occurred during the build time and cannot be dismissed.

App() 내에서는 반드시 하나의 부모 태그만 존재해야 합니다. 2개 이상의 태그를 사용하고자 하는 경우에는, <div> 태그 안에 여러개의 태그를 사용하면 됩니다.

import React, { Fragment } from 'react';

function App() { // 함수형 컴포넌트
  return (
    <div>
      <h2>test1</h2>
      <h2>test2</h2>
    </div>
    
  );
}

export default App;

또한, 기본적으로 HTML 코드를 작성하다 보면, <div> 태그를 자주 사용하게 됩니다. 굳이 <div>를 사용하지 않아도 된다면 <fragment> 혹은 <> 을 사용할 수 있습니다.

import React, { Fragment } from 'react';

function App() { // 함수형 컴포넌트
  return (
    <Fragment>
      <h2>test1</h2>
      <h2>test2</h2>
    </Fragment>
    
  );
}

export default App;
import React, { Fragment } from 'react';

function App() { // 함수형 컴포넌트
  return (
    <>
      <h2>test1</h2>
      <h2>test2</h2>
    </>
    
  );
}

export default App;

위 두 코드를 살펴보면, 하나는 <Fragment>를 사용하고 다른 하나는 <>를 사용했습니다. 는 눈에 나타나지 않는, 더미 태그라고 생각하면 쉽습니다. 마찬가지로 `<>` 비어있는 태그는 와 동일하게 사용됩니다.

실제 <div> 를 사용했을 때, 눈에 보여지는 코드와, <Fragment>를 사용했을 때 코드를 살펴보면 아래와 같습니다.

[div 사용]

<div id="root">
	<div>
		<h2>test1</h2>
		<h2>test2</h2>
	</div>
</div>
[Fragment 사용]

<div id="root">
	<h2>test1</h2>
	<h2>test2</h2>
</div>

<div> 태그를 사용하면 실제 해당 태그나 코드상에 나타나지만, <Fragment>를 사용하는 경우에는 해당 태그나 코드상에 나타나지 않습니다.




© 2017. by k3y6reak

Powered by k3y6reak