[React] Component 만들기

안녕하세요? 주니하랑 입니다.

오늘은 주니하랑이 React에 본격적으로 공부하는 시간인 것이에요.

주니하랑은 Full-Stack이 되고 싶은 것이에요!

소스 코드가 궁금하신 분들은 주니하랑의 Git에 관심을 주세요!

 

 

 

---

 

 

📌 이론

---

 

웹 브라우저는 리엑트라는 기술을 모르는 것이에요.
component를 통해 Tag를 만들고, 그것을 html과 Mapping해주면 리엑트가 알아서 html을 공급해 주게 된답니다.

Component (Class 기반)에서 사용 되는 언어는 유사 js이지 js가 아닌 것이에요. 그 안에 사용된 Tag문법이 다르기 때문이에요.

 

JSX는 Facebook에서 만든 컴퓨터용 언어로 이것을 사용하여 문법을 작성하면 create app이 알아서 컨버팅을 통해 js로 변환 시켜 주게 된답니다.

TOC는 Table Of Content로 목차를 나타내는 말이라 하네요!

리엑트는 엉망진창으로 쭉 썼던 html을 깔끔하게 정리 해주는 방법인 것이에요. 컴포넌트에만 집중하게 하여 복잡도를 확실하게 낮추어 줄 수 있는 것이에요.

 

 

 

📌 코드

---

  📍App.js

 

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

class Subject extends Component { // 나는 Subject(첫글자 대문자)라는 Component로 만들겠다.
    render() { // 반드시 render함수가 있어야 한다. 또한 Class안에 있는 함수(Method)는 function을 생략한다.
        return (
            // Component를 만들 때는 반드시 하나의 최상위 Tag만 (딱 하나) 써야 한다.
            <header>
                <h1>Web</h1>
                World Wide Web!
            </header>
        );
    } // render() 끝

} // Subject Component 끝

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

class Nav 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 App extends Component { // App Class
  render() {
        return (
            <div className="App">
                <Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>
                <Nav></Nav>
                <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
            </div>
        );
    }
}

 

        👉 결과

 

반응형

 

 

 

---

 

 

주니하랑의 글이 마음에 드셨나요? 구독과 공감! 그리고, 댓글 그리고 방명록은 주니하랑에게 많은 힘이 됩니다