[React] 컴포넌트 제작

Study. React

컴포넌트 제작

[리액트가 없다면]

 

📌만약에 코드가 엄청 길다면 하나하나 눈에 한 번에 들어오지 않음

📌그래서 사용자 정의 태그를 이용

 

 

[컴포넌트 만들기(1)]

📌컴포넌트를 만드는 코드

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

 

📌컴포넌트를 만들 때는 반드시 하나의 최상위 태그만을 사용해야 함

📌class 이름을 지정해주고 Component 안에서 그 클래스 이름을 태그에 사용

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

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>
      </div>
    );
  }
  
}

export default App;

 

📌nav태그 안의 요소도 Component로 만들어서 실행시키기

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

class Subject extends Component {
  render() {
    return (
      <header>
          <h1>WEB</h1>
          world wide web!
      </header>
    );
  }
}

class Nav 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 App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
        <Nav></Nav>
      </div>
    );
  }
  
}
export default App;

 

[컴포넌트 만들기(2)]

📌article태그 안의 요소를 Component로 만들어서 실행시키기

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

class Subject extends Component {
  render() {
    return (
      <header>
          <h1>WEB</h1>
          world wide web!
      </header>
    );
  }
}

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>
    );
  }
  
}

export default App;

 

 

[props]

📌코드를 줄여서 훨씬 효율적으로 사용 가능

📌ex) Subject 클래스 내에서 <h1>{this.props.title}</h1>

    👉 App component 내에서 <Subject title="WEB"></Subject>

📌결과는 똑같음, 코드가 더 줄어들어서 효율적임

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">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 Aside extends Component{
  render(){
    return(
      <aside>
        <button>hello</button>
      </aside>
    )
  }
}

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>
        <Aside></Aside>
      </div>
    );
  }
  
}

export default App;

 

 

📎강의-생활코딩:opentutorials.org/module/4058/24737

 

💡App 컴포넌트 안에 있는 사용자 정의 태그의 요소들을 태그 이름으로 만든 컴포넌트 클래스 안으로 가져오려면 this.props를 붙여서 '사용자 정의 태그 이름.props.title'로 title을 당겨온다. 

 

 

오늘은 여기까지

첫 영상을 보고 꽤 재밌겠다는 생각이 들어서 계속보기 시작했다.

사실 너무 긴 강의들은 점점 지루하다는 생각이 들어서 뒤로 갈수록 미루거나 포기하게 된다.

그러나 이 강의는 설명은 물론이고 강의가 길지 않아서 시간도 금방 가는 것 같다.

지금은 잠와서 잠깐 딴짓했더니 집중력이 흐트러져서 여기까지 보는 거고 아니었으면 더 봤을 거다.

내일도 무조건 강의를 들으러 오겠다.

하띵👊