React | 배포하기 & 컴포넌트 만들기

 

 

 

 

React 배포하기

npm run build //build하는 명령어 이 명령어를 통해 압축 찌꺼기 제거한 후 빌드
server -s build
npx serve -s build //serve라는 서버에 빌드한 것 올리기

 

컴포넌트 만들기

컴포넌트를 만드는 기본적인 템플릿

class App extends Component {
  render(){
    return (
      <div className="App">
        Hello, React!
      </div>
    );
  }
}

 

이런식으로 응용해서 사용한다.

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> //위에서 만든 컴포넌트1
        <TOC></TOC> //위에서 만든 컴포넌트2
        <Content></Content>
      </div>
    );
  }

 

Props

Props를 통해 코드를 효율적으로 재사용할 수 있다. props는 컴포넌트 사용자에게 중요한 정보이다.

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="React" sub="This is Real React!"></Subject> 
        <Subject title="JS" sub="This is Real JS!"></Subject> 
      </div>
    );
  }

이런 props(속성) title, sub에 계속 다른 값을 주면서 재사용이 가능하다.