1. 컴포넌트 만들기
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로 짠 코드를 React로 정리해보기
App.js
class Subject extends Component {
render() { // 일반적인 함수는 앞에 function이 붙지만 class에 소속된 함수는 생략
return (
<header> //컴포넌트를 만들 때는 반드시 하나의 최상위 태그로 시작해야 함
<h1>WEB</h1>
world wide web!
</header>
);
}
}
class TOC 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 Content extends Component {
render() {
return (
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
);
}
}/* 컴포넌트 이름에만 집중하게 함으로써 복잡도를 획기적으로 낮춤
(pure.html 코드보다 훨씬 코드가 간편해짐) */
class APP extends Coponent {
render() {
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
);
}
}실행결과 <div class="App"> 안에 <header>, <nav>, <article> 태그가 다 들어가 있음
❗ 위에 코드는 HTML 같지만 자바스크립트 (JSX)
- JSX로 코드 작성시 Creat React App이 알아서 자바스크립트 코드로 변환
- 태그를 열었으면 꼭 닫아야 함
- 두 개 이상의 태그는 무조건 하나의 태그로 감싸야 함
간단하게는<div>태그로, 복잡하다면<Fragment>태그로 감싸기
2. props
- 어떠한 값을 컴포넌트에게 전달할 때 사용
1) props 사용법
- React 매뉴얼 Components and Props
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}자신이 받아온 props값은 this로 조회 가능
2) props 사용하기
App.js
class Sample extends Component {
render() {
return (
<header>
//title, sub값을 받고 싶으면 props라는 파라미터를 통해 조회 가능
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
class APP extends Coponent {
render() {
return (
<div className="App">
//Subject 컴포넌트를 사용할 때 title, sub 같은 속성을 추가
<Subject title="WEB" sub="world wide web!"></Subject>
</div>
);
}
}Subject 컴포넌트는 언제나 똑같은 값을 갖고 있었지만 title, sub값에 따라 달라짐
(재사용성 높아짐)
3. 컴포넌트 파일로 분리하기
- src 디렉터리에 components 디렉터리 만들기
- components 디렉터리 안에 각각의 컴포넌트 별로 파일 만들기
TOC.js
// Component를 TOC.js 안에 쓰기 위해 리액트를 불러오는 코드
import React, { Component } from 'react';
class TOC 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>
);
}
}
export default TOC; // TOC 컴포넌트를 가져다 사용할 수 있는 코드App.js
//컴포넌트를 App.js에서 불러오는 코드, 상단에 코드 추가 후 각각의 클래스들 지우기
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
🚧개발중🚧