티스토리 뷰

WEB

[React] 컴포넌트 만들기

NakyungIm 2020. 12. 27. 03:43

이 글은 생활코딩 React 강의[opentutorials.org/module/4058]를 참고하여 작성하였습니다.

 

https://ko.reactjs.org/docs/getting-started.html

 

 

 

[Component 만들기] html -> js

Original <pure.html>

<html>
    <body>
        <header>
            <h1>WEB</h1>
            world wide web!
        </header>

        <nav>
            <ul>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">CSS</a></li>
                <li><a href="3.html">JavaScript</a></li>
            </ul>
        </nav>

        <article>
            <h2>HTML</h2>
            HTML is HyperText Markup Language.
        </article>
    </body>
</html>

 

Component로 바꾼 <App.js>

import React, { Component } from 'react';
import './App.css';

class Subject extends Component {
  render() {
    return (
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}

class TOC extends Component {
  render() {
    return (
      <nav>
        <ul>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
        </ul>
      </nav>
    );
  }
}

class Content extends Component {
  render() {
    return (
      <article>
        <h2>HTML</h2>
        HTML is HyperText Markup Language.
      </article>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

export default App;

 

header 태그 안의 내용을 Subject라는 컴포넌트로 만들기

<header> in <pure.html>

<header>
  <h1>WEB</h1>
  world wide web!
</header>

 

<Subject> in <App.js>

import React, { Component } from 'react';
import './App.css';

class Subject extends Component {
  render() {
    return (
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
      </div>
    );
  }
}

export default App;

 

 

웹에서 새로고침 했을 때

  • 웹은 react의 존재를 모른다! 

 

 

** 주의! **

  • 여기서 App.js는 진짜 자바스크립트가 아니라 유사 자바스크립트임. html 코드를 그냥 가져다가 사용함.
    원래는 따옴표 등등 사용해야하는데 여기에서는 하지 않음.
  • 우리는 .jsx 파일 작성 -> 리액트가 .js 파일로 컨버팅 해줌

 

 

[번외]

build 폴더 생성하기

npm run build

 

배포하기

npx serve -s build

 

 

 

 

끝~

댓글