컴포넌트란?
컴포넌트를 사용하여 이전에 짠 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.
간단히 설명하자면 컴포넌트는 Javascript 함수와 유사하다고 생각하면 된다.
제작하기
<html> <body> <header> <h1>REACT</h1> hello react! </header> <nav> <ul> <li><a href="section0.html">sec_0</a></li> <li><a href="section1.html">sec_1</a></li> <li><a href="section2.html">sec_2</a></li> </ul> </nav> <!-- --> <article> <h2>Article Area</h2> this place is article! </article> </body> </html>위 코드를 리엑트 컴포넌트로 분리해 보자.
먼저 App.js 파일을 열어보자
class App extends Component{
render(){
return(
<div className='App'>
Hello, React!
</div>
);
}
}이 부분이 컴포넌트를 만드는 코드이다.
리액트의 Component 기능을 상속하여 App라는 새로운 클래스를 만든다는 것을 알 수 있다.
그리고 App이라는 클래스는 render라는 메소드를 가지고 있다.
이 App의 코드를 복사하여 <header>를 App.js 코드내에 App클래스 위에
Subject라는 컴포넌트를 만들어보자.
class Subject extends Component {
render() {
return (
<header>
<h1>REACT</h1>
hello react!
</header>
);
}
}클래스는 대문자로 시작하며 "extends Component"는 Subject라는 컴포넌트를 만든다는 뜻이다.
일반적인 자바스크립트 함수는 앞에 "function"이 붙지만
클래스에 소속되어있는 함수는 function을 생략한다.
그리고 컴포넌트는 반드시 하나의 최상위 태그만 사용해야 한다.
옮기려 하는 header부분을 Subject라고 하는 이름의 태그로 정의한다.
class App extends Component {
render() {
return (
<div className='App'>
<Subject></Subject>
</div>
);
}
}그리고 라이브서버로 확인해 본다.
분명 <div className='App'>태그 안에 Subject라는 태그로 저장했지만
올바르게 header태그와 내부 정보도 저장되있는 것을 확인할 수 있다.
이전에
"컴포넌트는 반드시 하나의 최상위 태그만 사용해야 한다."
라고 했었는데 아래처럼 코드를 입력해보자.
class Subject extends Component {
render() {
return (
<header>
<h1>REACT</h1>
hello react!
</header>
<article>
</article>
);
}
}
위와같은 오류가 뜨며 웹브라우저 페이지도 경고를 알린다.
나머지 코드도 자신만의 컴포넌트로 만들어보자
import React, { Component } from 'react';
import './App.css';
class Navi extends Component {
render() {
return (
<nav>
<ul>
<li><a href="section0.html">sec_0</a></li>
<li><a href="section1.html">sec_1</a></li>
<li><a href="section2.html">sec_2</a></li>
</ul>
</nav>
);
}
}
class Arti extends Component {
render() {
return (
<article>
<h2>Article Area</h2>
this place is article!
</article>
);
}
}
class Subject extends Component {
render() {
return (
<header>
<h1>REACT</h1>
hello react!
</header>
);
}
}
class App extends Component {
render() {
return (
<div className='App'>
<Subject></Subject>
<Navi></Navi>
<Arti></Arti>
</div>
);
}
}
export default App;
이전 코드가 자신만의 컴포넌트로 변환한 것을 확인할 수 있다.
.jsx
위에 입력한 코드들은 자바스크립트 코드와 비슷하지만 자바스크립트의 까다로운 부분을 해결하기 위해 페이스북에서 만든 컴퓨터 언어 "jsx"라고 한다.
jsx로 코드를 작성한뒤 create-react-app이 자바스크립트 코드로 컴벌팅을 한다.
