react 컴포넌트(component) 개념

2020. 5. 11. 22:59· dev/react
목차
  1. - 순수 html 코드
  2. - react Component 생성코드 ( 순수 html 코드를 리액트로 변환, 즉component로 만듬) 
  3. - 추가 Component 생성코드 

참고사이트 

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로 만들어서 사용할수 있다.

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

'dev > react' 카테고리의 다른 글

react 이벤트  (0) 2020.05.17
react state소개 및 사용  (0) 2020.05.15
react 속성(props), react Developer Tools 사용  (0) 2020.05.13
react 구조  (0) 2020.05.05
react 설치, 개발환경구축  (0) 2020.05.04
  1. - 순수 html 코드
  2. - react Component 생성코드 ( 순수 html 코드를 리액트로 변환, 즉component로 만듬) 
  3. - 추가 Component 생성코드 
'dev/react' 카테고리의 다른 글
  • react state소개 및 사용
  • react 속성(props), react Developer Tools 사용
  • react 구조
  • react 설치, 개발환경구축
아디봉
아디봉
내인생의 카드는 몇장일까?
아디봉
내이른
아디봉
전체
오늘
어제
  • 분류 전체보기 (81)
    • 경제적자유 (11)
      • 경제노트 (4)
      • 부동산노트 (3)
      • 책리뷰 (1)
      • 유튜브 (2)
    • dev (50)
      • 사이드프로젝트 (0)
      • JavaScript (7)
      • 스프링 (5)
      • 자바 (11)
      • docker (7)
      • tdd (0)
      • DB (2)
      • mongoDB (1)
      • python (1)
      • react (9)
      • 인증.권한 (1)
      • 기타 (5)
      • HTTP (0)
      • JSP (1)
    • life (9)
      • 백패킹 (3)
      • 자기개발 (6)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • 쿠키
  • 정다르크
  • 백패킹
  • Lombok
  • Object
  • 스프링데이터jpa
  • Eclipse
  • javascript
  • 파코기
  • 옵셔널
  • jstree
  • web
  • log4j
  • docker
  • Java
  • React
  • 자바스크립트
  • react 이벤트
  • function
  • 파란코끼리들의기적
  • 자바
  • logback
  • javascript jsTree
  • Oracle
  • optional
  • Maven
  • Java8
  • 객체
  • Cookie
  • 롬복

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
아디봉
react 컴포넌트(component) 개념
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.