[리액트] 컴포넌트 만들기

ODaram 2022. 12. 7. 22:22

컴포넌트 만들기 1 - 순수한 html로 작성한 코드를 리액트로 정리하는 작업

수업.html 과 App.js 코드를 함께 보면서 코딩을 하겠다.

컴포넌트를 만들어 보겠다. App.js 에 보이는 코드가 컴포넌트를 만드는 코드이다.

<App.js>

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

객체지향을 이해하는 경우
' 리액트가 갖고 있는 Component 라는 클래스를 상속해서 새로운 App 클래스를 만든다.
그리고 그 클래스는 render 라는 메서드를 가지고 있다.'
라고 이해하면 된다.

객체지향에 익숙하지 않다면
' 컴포넌트를 만드는 코드', 일종의 템플릿이라고 생각하면 된다.

수업.html 에서 header 영역을 Subject 라는 이름의 간단한 태그로 변경하겠다.

App.js에 다음과 같이 작성한다.

주석에 설명을 하도록 하겠다.

<App.js>

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

class Subject extends Component {	//Subject 컴포넌트를 만들겠다는 클래스 선언 / 이름은 대문자로 시작해야한다 / 컴포넌트에는 반드시 render 라는 함수가 있어야한다.
	render() { // 함수이다. 자바스크립트의 최신 스펙에 클래스 문법은 소속되는 함수의 function 키워드를 생략한다.
    	return (	// header의 내용이 그대로 들어가 있다. / 컴포넌트를 만들 때는 반드시 하나의 최상위 태그로 시작해야한다.
        	<header>
            	<h1>WEB</h1>
                <p> world wide web! </p>
            </header>
        );
    }
}

class App extends Component {
	render() {
    	return (	// 여기서는 div 가 최상위 태그 / 반드시 하나의 태그만 리턴할 수 있다.
        	<div className="App">	
            	<Subject></Subject>
            </div>
        );
    }
}

export default App;

개발자 도구 > 인스펙터(Inspector)로 텍스트 부분을 선택 하면

<div> 태그가 상위에 있고 그 안에 header 태그가 있다.

리액트 코드로 작성 시에는 <Subject> 였는데,

리액트가 코드를 처리한 후 최종적으로 웹 브라우저가 알아들을 수 있는 <header> 라는 이름의 태그로 바뀌고

그 안의 내용도 <h1> 태그로 바뀐것이다.

즉, 웹 브라우저는 리액트 기술이 있는지 알지 못한다.

App.js는 개발자가 작성한 코드이고, 리액트가 최종적으로 웹 브라우저에게 변경된 HTML 코드를 공급하기 때문에

웹 브라우저는 리액트가 있는지 알지 못한다.

지금 작성한 App.js 는 유사 자바스크립트로 순수한 자바스크립트가 아니다.

App.js 의 코드는 페이스북에서 만든 JSX(Javascript XML)이라는 언어를 이용해 작성한 것이다.

JSX로 코드를 작성하면 C.R.A가 알아서 자바스크립트 코드로 변환해준다.

컴포넌트 만들기 2 - 나머지 태그들을 컴포넌트화 하기

우선 App.js 를 다음과 같이 작성한다.

<App.js>

수업시간에 작성한 코드 집어넣기 
P.55 참고

1) <nav> 부분을 TOC라는 컴포넌트로 변경했다.

TOC : Table Of Content, 목차라는 뜻이다.

2) <article> 부분을 Content 라는 컴포넌트로 변경했다.

앞서 Subject 컴포넌트에서 했던 것과 마찬가지로

class를 선언하고 render 함수를 구현한 다음, 수업.html 파일의 태그를 넣으면 된다.

이 과정을 통해 리액트의 컴포넌트를 바라보는 첫번째 시각으로 그것을 정리정돈의 도구로 볼 수 있겠다.

컴포넌트의 이름에만 집중하게 함으로써 복잡도를 획기적으로 낮출 수 있다.

( 컴포넌트 = 재사용이 가능한 템플릿 )