[React] 컴포넌트 제작

0. 리액트가 없다면

• 엄청 긴 코드를 그냥 써야함

---

1. 컴포넌트 만들기

• 컴포넌트 만드는 방법

• 하나의 최상위 태그만 써야한다!
• 웹브라우저는 React라는 기술을 모른다. React는 html로 변환시켜주는 것이고 브라우저입장에서는 html 코드를 받기 때문이다.
• 위 코드는 javascript 는 아니다. 유사 javascript 이다.
• javascript에서 돌리면 에러난다. 저것은 JSX 라는 Facebook 에서 만든 언어이다. 
• 예시 화면

• 컴포넌트를 정리정돈의 도구로 보면 좋겠다.

---

2. props

• React는 컴포넌트를 외부에서 조작할 때 props 를 사용한다.
• 좀 더 효율적인 코드 작성 가능
• {this.prop.[xxxx]} 같은 방식을 이용

import React, {Component} from 'react';
import './App.css';
 
 
class Subject extends Component {
  render(){
    return (
      <header>
        <h1>{this.props.title}</h1>
            {this.props.sub}
      </header>
    );
  }
}
 
 
class TOC extends Component {
  render(){
    return (
      <nav>
            <ul>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">HTML</a></li>
                <li><a href="3.html">HTML</a></li>
            </ul>
        </nav>
    );
  }
}
 
class Content extends Component {
  render(){
    return (
      <article>
        <h2>{this.props.title}</h2>
            {this.props.desc}
        </article>
    );
  }
}
 
class App extends Component {
  render(){
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <Subject title="React" sub="For UI"></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
      </div>
    );
  }
}
 
export default App;
 

---

3. React Developer Tools

• React Developer Tools 다운로드 사이트

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

• 크롬 개발자 도구를 들어간 후 Component 탭을 클릭하면 다음과 같은 화면을 볼 수 있다.

• 오른쪽 props 탭에서 즉각적으로 값을 바꾸는 것도 가능하다.

---

4. Component 파일로 분리하기

• 컴포넌트가 만약 1000개가 된다면 매우 복잡해질 것이다.
• 따라서 각각의 컴포넌트별로 파일로 쪼갤 것이다.
• 아래 코드는 TOC 라는 코드를 외부에서 사용할 수 있게 해주는 코드이다.
• export default TOC;