dev/react

react 컴포넌트(component) 개념

아디봉 2020. 5. 11. 22:59

참고사이트 

https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

 

React - YouTube

 

www.youtube.com

2020/05/04 - [react/기초] - react 설치, 개발환경구축

2020/05/05 - [react/기초] - react 구조

- 순수 html 코드

위치 public > 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>

 

위 같은 순수html 코드는 한눈에 이해하기 쉽다. 하지만 소스가 1000만줄 정도라면 어떨까?

 

- react Component 생성코드 ( 순수 html 코드를 리액트로 변환, 즉component로 만듬) 

위치 src > App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function Subject() {
  return (
    <header>
        <h1>WEB</h1>
        world wide web!
    </header>
  );
}

function App() {
  return (
    <div className="App">
      <Subject></Subject>
    </div>
  );
}

export default App;

1. pure.html의 header부분을 App.js에 Subject() component로 만듬 

2. App() function에 <Subject></Subject> 넣어줌

Component 명은 대문자로 시작할것.!

 

- 추가 Component 생성코드 

import React from 'react';
import logo from './logo.svg';
import './App.css';

function Subject() {
  return (
    <header>
        <h1>WEB</h1>
        world wide web!
    </header>
  );
}

function Nav(){
  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>
  );
}

function Article(){
  return (
    <article>
        <h2>Html</h2>
        Html is HyperText Markup Language.
    </article>
  );
}

function App() {
  return (
    <div className="App">
      <Subject></Subject>
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

추가로 pure.html의 Nav, Article 부분을 Component로 만듬

결국 pure.html의 Subject, Nav, Article의 부분들을 위와같이 Component로 만들어서 사용할수 있다.

복잡도를 획기적으로 낮추는 효과가 있다.