[React]생활코딩 2️⃣ 컴포넌트 제작
컴포넌트(Component)
컴포넌트는 React의 핵심 기능이다.
컴포넌트를 만듬으로써 가독성을 높이고 생산성을 향상시킬 수 있다.
컴포넌트 만들기-1
pure.html(react 이전의 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>
app.js(pure.html에 react적용)
import React, { Component } from 'react';
import './App.css';
class Subject extends Component {
//class 안에서 함수는, function을 생략한 축약형을 사용할 수 있다.
render(){
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject> //pure.html <header>태그를 화면에 나타냄 </div>
);
}
}
export default App;
- app.js의 코드는 유사 자바스크립트인 JSX(JavaScript XML)이다.
- html태그를 ‘ ‘ , “ “ 등으로 감싸지 않고 그대로 사용할 수 도있고, { } 안에 변수나 함수를 넣어 사용할 수도 있다.
- 페이스북이 만든 자바스크립트 확장형이며, create-react-app은 JSX를 자바스크립트 코드로 converting 해준다.
- 컴포넌트를 패키지로 만들어서 공개하면, 다른 사람과 공유가 가능하다.
- 컴포넌트는 function 형태로 생성할 수 도 있고, app.js 처럼 class 형태로 생성할 수 도 있다.
컴포넌트 만들기-2
porps
import React, { Component } from 'react';
import './App.css';
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>{this.props.title}</h2>
{this.props.desc}
</article>
);
}
}
class Subject extends Component {
render(){
return (
<header>
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject title="WEB" sub="world wide web!"></Subject>
<TOC></TOC>
<Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
</div>
);
}
}
export default App;
컴포넌트에 props(속성)과 value(값)을 추가해주면,
{this.props.title} 과 {this.props.sub} 등 으로 해당 property의 값을 가져올 수 있다.
컴포넌트가 매번 똑같은 값을 뿌려주는 것이아니라, 입력값에 따라 다른 출력값을 화면에서 나타낼 수 있다.
React Developer Tools
react로 만들어진 애플리케이션의 상태를 확인할 수 있는 도구이며, 페이스북에서 공식적으로 추천하는 디버깅 툴이다. Chrome의 확장프로그램이다.
개발자도구(F12) -> React 탭
을 하면 사용자가 추가한 컴포넌트들을 볼 수 있다.
Component 파일로 분리하기
컴포넌트별로 별도의 파일로 정리정돈하면 필요한 곳에서 사용하기가 용이하다.
TOC.js
import React,{Component} from 'react';
//react, Component를 사용하기 위한 코드
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>
)
}
}
//외부 파일에서 TOC를 사용하게 해주는 코드
export default TOC;
<TOC></TOC> 를 사용할 곳에서는
import TOC from “TOC.js의 경로”
를 추가해준다.
Leave a comment