React #2 컴포넌트 제작
리액트가 없다면?
npm run start를 했을 때 public 디렉토리를 찾음.
<시맨틱 태그> 의미론적으로 정의할 때 사용.
<header> 시맨틱 태그는 아무런 기능이 없지만 제목 부분임을 의미
<nav> <article> 등...
시맨틱 태그마다 n만 줄의 코드가 있다면? -> 인지하기 어려움
태그를 감추고 이름만 심플하게 해도 웹페이지 내용은 그대로 해주는 것이 리액트
컴포넌트 만들기
class App extends Component {
render() {
return (
<div className="App">
Hello, React!
</div>
)
}
}
컴포넌트를 만드는 코드.
객체 지향으로 이해하면!
리액트가 가지고있는 Component라는 클래스를 상속해서 새로운 클래스 App을 만든다.
render()라는 메소드를 가지고 있다.
class Subject extends Component {
render() {
return();
}
}
Subject라는 Component를 만들겠다는 의미. 클래스의 첫문자는 꼭 대문자!
render()라는 함수는 꼭 있어야함.
일반적으로 함수를 정의할 때 앞에 function을 쓰지만 class 내부의 함수는 function을 생략한다.
return(
<header>
<h1>WEB</h1>
world wide web!
</header>
);
return 괄호 안에 코드를 작성.
주의! 컴포넌트를 만들 때는 반드시 하나의 최상위 태그로 시작해야 한다. <header>, <div>와 같은,,
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
</div>
)
}
}
리액트 코드에서는 <Subject> 지만, 웹브라우저는 <header>로 바꿔줌.
웹브라우저는 리액트의 존재를 모르고, 리액트가 최종적으로 웹브라우저한테 html코드를 공급해준다.
App.js는 유사 자바스크립트로 거의 자바스크립트와 유사하지만, 자바스크립트가 아니다.
문법상으로 편하도록 페이스북이 만들어 놓은 jsx 언어.
Create-React-App이 jsx 언어를 자바스크립트 언어로 바꿔줌.
TOC, Content 컴포넌트 추가하기
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>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
)
}
}
리액트는 정리정돈의 도구와 같다!
컴포넌트 이름에만 집중하게 함으로써 복잡도를 낮춤.
props
<li><a href="1.html">HTML</a></li>
링크 태그 <li>
a로 태그임을 알리고 href라는 속성으로 주소를 나타냄.
즉, a라는 "이름"의 공통점과 href라는 "속성"의 차이점.
-> 재사용성이 높게 만들 수 있다!
<h1>{this.props.title}</h1>
{this.props.sub}
this.props.원하는 속성의 이름
<Subject></Subject>
는 항상 똑같은 결과만 나타내지만
<Subject title="WEB" sub="world wide web!"></Subject>
props를 입력하면 출력값이 그 때마다 달라지게 됨.
완벽하게 동작하는 사용자 정의 태그!
React Developer Tools
크롬의 확장 프로그램.
우리가 만든 앱의 컴포넌트들을 보여주는 도구
실제 태그를 볼 때 -> 요소
리액트 분석 -> Tools 메뉴 사용, 실시간으로 내용 변경 가능!
Component 파일로 분리하기
scr -> components 라는 새로운 디렉토리 생성해서 컴포넌트들을 분리함.
TOC 컴포넌트 분리
하나의 컴포넌트 안에는 여러 변수와 함수가 존재할 수 있다.
그 중에서 어떤 것을 외부에 사용할 수 있도록 허용할 것인지. -> export
export default TOC;
TOC.js 를 가져다 쓰는 쪽에서 TOC라는 클래스를 가져다 사용할 수 있게 됨.
import TOC from "./components/TOC";
TOC를 가져올 경로 명시
TOC.js
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;
App.js
import React, { Component } from 'react';
import TOC from "./components/TOC";
import Content from "./components/Content"
import Subject from "./components/Subject"
import './App.css';
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;
-> 코드가 간단명료해지고, 원하는 코드를 빠르게 찾을 수 있다.
-> App.js가 아닌 다른 리액트 파일에서도 컴포넌트를 재사용할 수 있다.
