[React] 2021.01.18

P1ush·2021년 1월 18일

React

목록 보기

1/10

function type

import React from 'react';
import './App.css';
function App() {
  return (
    <div className="App">
    
    <div>
   );
}
export default App;

class type

import React, { Component } from 'react';
import './App.css';

class App extends Component{
  render(){
    return (
        <div  className="App">
        
        <div>
     );
   }
}

export default App;

컴포넌트 만들기

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)

import React, { Component } from 'react';
import './App.css';

class Article extends Component {
  render() {
    return (
      <article>
        <h2>HTML</h2>
        HTML is HyperText Markup Language.
      </article>
    );
  }
}

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 Subject extends Component {
  render() {
    return (
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}

위 처럼 새로운 이름의 컴포넌트를 만들 수 있음.

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Article></Article>
      </div>
    );
  }
}

정해진 틀 <div className="App"> 에 위에서 만든 새로운 이름의 컴포넌트들을 태그 형식으로 써주면 HTML에서 작성한 결과와 동일하게 나오게 됨. 결과는 같지만, 코드가 좀 더 깔끔하고 간결하게 나옴.

Props 함수를 통해 컴포넌트에게 값 전달하기

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>
        <Article title="HTML" sub="HTML is HyperText Markup Language."></Article>
      </div>
    );
  }
}

컴포넌트에다가 title과 sub라는 값을 전달하고 싶을 때, 다음과 같이 하면 됨.

class Article extends Component {
  render() {
    return (
      <article>
        <h2>{this.props.title}</h2>
        {this.props.sub}
      </article>
    );
  }
}

{this.props.컴포넌트 이름} 형식으로 작성하면 값을 전달할 수 있음.
props의 장점은, 기존에는 언제나 똑같은 한가지 값만 전달했지만, props 함수를 사용함으로써 여러가지 값을 전달할 수 있음.

P1ush

다음 포스트