이다닷

[React] Day 1 - 컴포넌트 만들기 본문

React

[React] Day 1 - 컴포넌트 만들기

이다닷 2023. 8. 25. 16:04

본래 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>

 

컴포넌트를 만드는 방법

App.js 파일 내용

➡️react라는 class 안에 있는 component를 가져와서 새로운 App라는 클래스에 상속해준다는 의미.

➡️그리고 그 component라는 class에는 render이라는 메소드를 가지고 있다.

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

class App extends Component {
  render(){
    return (
      <div className="App">
        Hello, React!!
      </div>
    );
  }
}

export default App;

 

HTML 코드를 react 코드로 변경시키기.

📌반드시 <Header>, <div>와 같은 최상위 태그는 한개만 포함시켜줘야한다.

 

변경된 react 코드

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 Article 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>
        <Article></Article>
      </div>
    );
  }
}

export default App;

 

결과사진

 

저작자표시

'React' 카테고리의 다른 글

[React] Day 7 - Create 구현 1  (0) 2023.08.31
[React] Day 6 - 컴포넌트 이벤트 만들기  (0) 2023.08.30
[React] Day 5 - event 개념  (0) 2023.08.29
[React] Day 4 - state  (0) 2023.08.28
[React] Day 3 - component 파일로 분리하기  (0) 2023.08.27
'React' Related Articles more